我想创建一个自定义事件，它可以从任何组件触发并收听我的 angular 7 应用程序中的任何组件

Question

我想创建一个自定义事件，它可以从任何组件触发并监听我的 angular 7 应用程序中的任何组件

假设我有 1 个组件，其中有一个单击按钮，我想在该按钮上使用一些数据触发我的自定义事件。接下来，将有另一个组件在触发时不断监听该事件，它将执行一些代码并相应地更新 ui。

我该如何实施？

Answer 1

好吧好吧，您正在寻找的是共享服务。此共享服务将有一个 BehaviorSubject 作为数据源。通过这个，您将能够推送新的数据流。然后你会暴露这个 BehaviorSubject asObservable.

然后您将 subscribe 从您想要侦听数据更改的所有组件到此 Observable，然后做出相应的反应。

这就是代码中的样子：

import { Injectable } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Injectable()
export class SharedService {

  private data: BehaviorSubject<any> = new BehaviorSubject<any>(null);
  data$: Observable<any> = this.data.asObservable();

  constructor() { }

  setData(newData) {
    this.data.next(newData);
  }

}

您现在可以在您想要的任何控制器中注入 SharedService 并从您要从中推送新数据的组件调用 setData（请参阅样本 StackBlitz 中的 AppComponent更多细节）。然后你还将在其他组件中注入 SharedService，在那里，你将在它们的 ngOnInit 中 subscribe 到 data$（参见 HelloComponent来自示例 StackBlitz 的详细信息）

这里有一个 Sample StackBlitz 供您参考。

我想创建一个自定义事件，它可以从任何组件触发并收听我的 angular 7 应用程序中的任何组件

I want to create a custom event which can trigger from any component and get listened to any component within my angular 7 app

javascript

typescript

angular

angular7