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

Question

Whyyyyyyyyyyyyyyy？

亲爱的读者，

我一直在寻找高低，但没有人能够解释这一点，只要说出“这就是效果！”，或“这就是你如何做到的！不要问为什么！”

问题

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

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

父模板

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

无论出于何种原因，没有人可以在远程抽象的任何东西中解释这种语法每个答案都是如此难以忍受具体，除了在组件级别定义事件的特殊性之外，任何意义都会丢失，只有直接父级才能访问 - 而且，实际上没有任何理由< / em>使用@Output / EventEmitter代替@Input / callback。

问题

@Output isThisAUselessVariable; 鉴于这个“输出”是未定义的 - 而且，与EventEmitter无关 - 波塞冬的目的是什么呢？在这一点上，我甚至可以用它做什么？现在完全没用吗？如果它有值，但值是Array还是Object怎么办？怎么样String？ 我如何使用@Output 而使用EventEmitter？

似乎就像这里奇怪的问题，但我想避免回答“因为你可以将它用于事件。如果你想要一个事件，请使用它！这就是你做事件的方式！为什么我不知道！只记得魔术事件的语法！“

进一步的问题＆amp;趣闻

A）

为什么命名法是“@Output”？是什么使它成为“输出”？

<小时/> B）

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

<小时/> C）

消息是我使用@Output的唯一原因吗？它还能用于什么？ [ 看到' ]

<小时/> d）

谁能听到这个活动？一个曾祖父母可以听，而不必直接将处理程序传递给孩子/曾孙并手动鼓泡吗？ [见'B']

<小时/> E）

我习惯于将消息传递为全局或冒泡，以及精心设计的事件驱动架构，以在应用程序规模中定义事件类型 - 而不是组件规模。这允许不同类型的“消息过滤”（参见维基百科），并允许我们使用应用程序中介。

为什么我希望在组件规模上使用它？如何在更高规模上定义事件并在较低规模上使用它们？

<小时/> 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 使用可注射服务作为中介提供了更大的灵活性。