打字稿 | JavaScript | Angular 2 | @Output 与 @Input

Question

为什么yyyyyyyyyyyyy？

亲爱的Reader,

我搜索过高低，但如果没有巨大的信念飞跃，没有人能解释这一点，只说 "Here are the effects!" 或 "This is how you do that! Don't ask why!"

问题

class ChildComponent {
    @Output selected: EventEmitter<T>() = EventEmitter<T>();
    @Input item;
    handleClick(e, t) {
        ...
        this.selected.emit(t);
    }
}

class ParentComponent {
    items = [];
    handleSelection(type) {
        ...
    }
}

Parent 模板

<child-component [item]="item" (selected)="handleSelection(item)" *ngFor="let item of items">
    {{item.name}}
</child-component>

无论出于何种原因，没有人能够以任何抽象的方式解释这种语法。每个答案都如此具体以至于在组件级别定义事件的特殊性之外失去了任何意义，其中只有直接 parent 可以访问 - 而且，实际上没有任何理由使用@Output/EventEmitter而不是@Input/callback。

问题

@Output isThisAUselessVariable; 鉴于此 "output" 是未定义的——此外，与 EventEmitter 无关——看在 Poseidon 的份上，我将如何处理它？在这一点上，我什至可以用它做什么？现在是完全没用了吗？如果它有一个值，但该值是 Array 或 Object 怎么办？ String 怎么样？ 我如何使用 @Output 而不是 使用 EventEmitter？

似乎在这里提出奇怪的问题，但我想避免回答 "Because you can use it for events. If you want an event, use this! This is how you do events! Why??? I don't know! Just remember the magic event syntax!"

更多问题和好奇心

A)

为什么命名为“@Output”？是什么让它成为 "output"？

B)

除了 消息耦合 的潜在好处之外，为什么不使用 @Input 回调？

C)

消息传递是我使用 @Output 的唯一原因吗？ is/can 它还有什么用？ [见'A']

D)

谁可以收听此事件？ great-grandparent 可以在不必将处理程序直接传递给 child/great-grandchild 并手动冒泡的情况下进行监听吗？ [见'B']

E)

我习惯了消息传递是全局的或冒泡的，well-designed Event-Driven 架构定义 Event-Types 在 Application-Scale -- 不是 Component-Scale。这允许不同类型的“消息过滤”（参见维基百科），并允许我们使用应用程序中介。

为什么我想要在组件规模上使用它？我怎样才能在更高的尺度上定义事件并在更低的尺度上使用它们？

F)

我如何调解这些事件？ [见'E']

不胜感激，

科迪

Answer 1

如果用@Output 注释一个变量，它必须是EventEmitter 类型。变量的名称成为自定义事件的名称。消息传递是使用@Output 的唯一原因。您正在发送一个事件而不关心谁有兴趣获得它。 Angular 不支持事件冒泡，但您可以使用原生 DOM 事件实现它。

IMO，与传递回调相比，使用事件在组件间通信中提供了一种更松散耦合的架构。在此博客中，我展示了如何使用带有@Input 参数的回调：https://yakovfain.com/2016/10/31/angular-2-component-communication-with-events-vs-callbacks/

在这个视频中，我展示了一种使用@Input、@Output 和父组件作为中介的中介方式：https://www.youtube.com/watch?v=tSXx4NoKEYY 不过，使用可注入服务作为中介提供了更大的灵活性。

打字稿 | JavaScript | Angular 2 | @Output 与 @Input

TypeScript | JavaScript | Angular 2 | @Output vs @Input

javascript

angular

typescript

output

eventemitter

为什么yyyyyyyyyyyyy？

问题

Parent 模板

问题

更多问题和好奇心