Angular - 如何在 2 个不相关组件的（多个实例）之间共享数据？

Question

我有 2 个不相关的组件，一个搜索栏和一个表格。我有一项在它们之间共享数据的服务。问题是我有多个搜索+表格组件实例，具体取决于搜索。每当我搜索时，它都会更新所有表。有没有办法让我在两个组件之间绑定一个服务？

我知道我可以将搜索和表格组件合并为 1 个组件，但是根据我的项目的设置方式，这会让事情变得比现在更复杂。

不用付出太多，这就是我所拥有的。

// Data sharing service
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable({
    providedIn: 'root'
})
export class DataSharingService {

    private data = new BehaviorSubject<any>(null);
    currData = this.data.asObservable();

    constructor(){}

    updateSearchRes(newData: any){
        this.data.next(newData);
    }
}

// search component
onClick(e: any){
  // get search data
  this.searchResults = this.getSearchResults(e);

  // send data to service
  this.searchResults.forEach(element => {
     this.dataSharingService.updateSearchRes(element);
  });
}

// table component
ngOnInit(){
  ...

  // listen for data
  this.dataSharingService.currData.subscribe(newSearchRes => {
    this.addDataToTable(data);
  });

  ...
}

Answer 1

您需要使用简单的 if 条件将发射范围限制为单个组件结构。

组件的 HTML 看起来像这样。

...
<app-search searchKey="home"/>
...
<app-table searchKey="home"/>
...

首先我们转换服务发射方法，以发射具有事件名称的对象，而不仅仅是数据。

// Data sharing service
import { Injectable } from "@angular/core";
import { BehaviorSubject } from "rxjs";

@Injectable({
    providedIn: 'root'
})
export class DataSharingService {

    private data = new BehaviorSubject<any>(null);
    currData = this.data.asObservable();

    constructor(){}

    updateSearchRes(eventName: string, newData: any){
        this.data.next({eventName, data: newData });
    }
}

现在，当您单击搜索时，您会看到一个

@Input() searchKey = ''

，此搜索键可用于过滤表接收到的发出。

// search component
...
@Input() searchKey = ''
...

...
onClick(e: any){
  // get search data
  this.searchResults = this.getSearchResults(e);

  // send data to service
  this.dataSharingService.updateSearchRes(this.searchKey, this.searchResults);
}

然后使用相同的方法对表格进行过滤。

// search component
...
@Input() searchKey = ''
...

...
// table component
ngOnInit(){
  ...

  // listen for data
  this.dataSharingService.currData.subscribe((event: any) => {
    if(event.eventName === this.searchKey) {
        this.addDataToTable(event.data);  
    }
  });

  ...
}