javascript - 在 Angular 组件中使用 @Input 和 @Output 共享数据

Question

我不明白为什么一个事件需要从 child 分享给 parent (@Output)，而 @Input() 对 parent 来说工作正常.

如果我们想在不点击任何按钮的情况下与父组件共享数据，就像在 @Input 的情况下怎么办？如果组件之间没有任何关联怎么办？

Answer 1

Why do we need an event?

因为这样可以防止循环引用。如果 parent 有对 child 的引用，而 child 有对 parent 的引用，这将是一个循环引用。它还会增加代码的复杂性。如果我正在编写一个“按钮”组件，我不想担心是什么类型的组件持有我的按钮组件。

What if we want to share data with parent component without clicking any button like in case of @Input?

您可以通过编程方式触发事件。例如，您可以有一个计时器组件，它使用 RxJS interval observable 每 5 秒触发一个事件。

interval(5000).subscribe(() => myOutput.next());

What if components are not related in any way?

然后他们应该通过共享服务而不是使用Input 和Output 进行通信。