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

亲爱的读者：

我到处寻找，但没有人能解释这一点，除非有一个巨大的信念飞跃，只是说，“这是效果！”，或“这就是你如何做到的！不要问为什么！”

问题 父模板

{{item.name}

不管出于什么原因，没有人能用任何抽象的语言来解释这种语法。每个答案都非常具体，除了在组件级别定义事件的特殊性之外，没有任何意义，在组件级别，只有直接的父级才有访问权——而且，几乎没有任何理由使用

@Output

/

EventEmitter

而不是

@Input

/

回调

问题:

@Output是hisauselessvariable
考虑到这个“输出”是未定义的——而且，它与
EventEmitter
没有任何关系——看在波塞冬的份上，我该怎么处理它呢？在这一点上，我甚至可以用它做什么？现在完全没用了吗？如果它有一个值，但该值是
数组
或
对象
，该怎么办？一个
字符串如何如果不使用
EventEmitter
，如何使用
@Output
？

这似乎是一个奇怪的问题，但我想避免回答“因为你可以将其用于事件。如果你想要一个事件，请使用它！这就是你处理事件的方式！为什么？？？我不知道！请记住神奇事件语法！”

进一步的问题和好奇
（A）

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

（B）

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

（C）

消息传递是我使用
@Output
的唯一原因吗？它还有什么用途？[见“A”]

（D）

谁可以收听此事件？一位曾祖父母是否可以倾听，而不必将处理程序直接传递给孩子/曾孙，并手动将其冒泡？[见“B”]

（E）

我习惯于消息传递是全局的或冒泡的，以及设计良好的事件驱动体系结构来定义应用程序级别的事件类型，而不是组件级别的事件类型。这允许不同类型的“消息过滤”（参见Wikipedia），并允许我们使用应用程序中介

为什么我要在组件规模上使用它？如何在更高的范围内定义事件，并在更低的范围内使用它们？

（F）

我怎样才能调解这些事件？[见“E”]


万分感激

Cody
如果用@Output注释变量，则该变量必须为EventEmitter类型。变量的名称将成为自定义事件的名称。消息传递是使用@Output的唯一原因。你发送一个事件而不关心谁对它感兴趣。Angular不支持事件冒泡，但可以使用本机DOM事件实现它

在IMO中，使用事件在组件间通信中提供了比传递回调更松散耦合的体系结构。在这个博客中，我展示了如何使用带有@Input参数的回调：

在本视频中，我展示了使用@Input、@Output和父组件作为中介的一种中介方式：
但是，使用可注入服务作为中介提供了更大的灵活性。
如果用@Output注释变量，那么它必须是EventEmitter类型。变量的名称将成为自定义事件的名称。消息传递是使用@Output的唯一原因。你发送一个事件而不关心谁对它感兴趣。Angular不支持事件冒泡，但可以使用本机DOM事件实现它

在IMO中，使用事件在组件间通信中提供了比传递回调更松散耦合的体系结构。在这个博客中，我展示了如何使用带有@Input参数的回调：

在本视频中，我展示了使用@Input、@Output和父组件作为中介的一种中介方式：
使用可注入服务作为中介提供了更大的灵活性。
“而且，实际上没有任何理由使用
@Output
/
EventEmitter
而不是
@Input
/
callback
”那么使用事件而不是回调的所有常见原因呢，例如，如果你需要的听众数量不是1？个人推荐-我建议提问而不是批评：“这是错误的。为什么有人会犯错？”这不会真正激励任何人花时间回答一个问题，更不用说一个由6部分组成的问题了。这个问题太广泛了……而且，让你的标题不是一堆关键词；迈克，我想你说的是深度。Broad类似于“我如何使用TypeScript？”，它有很多宽度。这个问题只涉及@Output。“而且，实际上没有任何理由使用
@Output
/
EventEmitter
而不是
@Input
/
回调
”那么使用事件而不是回调的所有常见原因呢，例如，如果你需要的听众数量不是1？个人推荐-我建议提问而不是批评：“这是错误的。为什么有人会犯错？”这不会真正激励任何人花时间回答一个问题，更不用说一个由6部分组成的问题了。这个问题太广泛了……而且，让你的标题不是一堆关键词；迈克，我想你说的是深度。Broad类似于“我如何使用TypeScript？”，它有很多宽度。这个问题只涉及@Output。这是一个非常好的答案。这真的很有帮助！多好的回答啊。这真的很有帮助！
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>