在 Angular 组件中使用 EventEmitter 作为 Input()

Question

我有 2 个组件 b,c，位于 a 中同一级别 A 乙

c 在 Output() 中使用 EventEmitter eC 引发了我想在 b 中使用的事件。 由于我无法“直接”将其提供给 b，因此我通过创建另一个位于 a 中的 EventEmitter eA 来“重定向”这些事件，该 eA 仅重播传入事件 eC。然后我将此 EventEmitter 作为 Input() 传递给 b:

//b
  @Input() public reloadRequested: EventEmitter<void>;
  ngOnInit() {
    this.reloadRequested.subscribe(() => {
...
    });
  }

这种做法有什么问题吗？我很想知道，因为我在网上研究期间基本上没有找到任何东西。 否则你会怎么做？

更新： 我不想将数据传递给组件，而是传递给事件。 使用 Input() 装饰器，引用父组件的 EventEmitter，对我来说似乎是显而易见的方法。

Answer 1

执行此操作的通常方法是，保持其余设置相同（组件 C 发出事件，父级 A 处理事件），即：补丁值（不是事件发射器/可观察）作为组件 B 的输入，并在B 使用

ngOnChanges

钩子或 setter 输入：

ngOnChanges(changes: SimpleChanges): void {
    if (changes.someInput) {
// do stuff with this.someInput
    }
}

或

@Input set() someInput (value: any) {
// do stuff with `value`
}

主要编辑：但考虑到 C 没有发出任何我们关心的“值”，我们只关心发射本身的事实，这不是正确的模式。您使用可观察输入的方法是合理的，只是一个小小的改进：父母实际上不需要做任何事情，当然也不需要创建另一个可观察的。所有必要的构建块都在那里，只需将它们粘贴在模板中即可：

<app-c #thatButton></app-c>
<app-b [foo$]="thatButton.foo"></app-b>

堆栈闪电战：

https://stackblitz.com/edit/angular-simple-changes-utvl61?file=src%2Fapp%2Fb%2Fb.component.ts

Answer 2

在组件中使用 @Output 指令同步或异步发出自定义事件，并通过订阅实例来注册这些事件的处理程序。

事件发射器

还有

通过添加emit()方法扩展了Angular的RxJS主题。

事件发射器

所以它看起来确实只是一个只有一个目的的主题：从组件输出数据，所以我将使用它们只是为了这个。

我通常在父组件中订阅 eventEmitter，将数据存储在变量中并将其发送到其他子组件的 Input。

一切都应该自动刷新。