Angular 9：通知“不相关”组件采取的行动答案

【问题标题】：Angular 9: Notify "unrelated" component of action takenAngular 9：通知“不相关”组件采取的行动
【发布时间】：2020-06-16 03:43:43
【问题描述】：

我在 app.component 中使用了一个顶部导航组件。在那个顶部导航中，有一个按钮可以更改全局过滤器。我需要能够通知当前加载在我的路由器插座中的组件过滤器已更改，因此如果根据新过滤器刷新其数据。

这是我的应用组件外观的简化 sn-p：

<app-top-nav></app-top-nav>
<router-outlet></router-outlet>

所以，在我的顶部导航中发生了一些事情，我从那里发出了一个事件。现在，我需要能够通知当前组件该更改（当前通过路由器插座加载的组件）。我该如何做到这一点？他们不是真正的兄弟姐妹或有父子组件，所以我被卡住了。

非常感谢。

【问题讨论】：

标签： angular

【解决方案1】：

你可以在不相关的组件之间与服务共享数据。

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
@Injectable()
export class ShareService  {   
  constructor() { } 
  private paramSource = new BehaviorSubject("");
  sharedData = this.paramSource.asObservable();
  setParam(param:string) { this.paramSource.next(param)}    
}

在 appmodule 中放入提供者

providers:[ShareService ]

在组件中加入构造函数

constructor(private shareService: ShareService  ){}

从第一个组件发送喜欢

this.shareService.setParam('Sending param');

从第二个组件接收喜欢

 this.shareService.sharedData.subscribe(data=> { console.log(data); })

【讨论】：

【解决方案2】：

O 设法通过使用充当中介的服务解决了这个问题。 top-nav 通过该服务更改过滤器，并且该服务发出事件，而不是 top-nav。另一个组件订阅服务发出的事件。

服务：

export class MasterFilterService {
    @Output()
    filterChange = new EventEmitter<void>();
    getFilterChangeEmitter() {
        return this.filterChange;
    }
    changeFilter() {
       ...
       this.filterChange.emit()
   }
}

路由组件：

subscription: any;
constructor(
    private readonly masterFilterService: MasterFilterService) {
    this.subscription = this.masterFilterService.getFilterChangeEmitter()
        .subscribe(() => {
            //Do whatever needs to be done in response to the event
            this.resetGrid();
        });
}

【讨论】：