angular 可观察到仅更新它的 parent 页面上具有多个组件的订阅者

Question

我在屏幕上有 2 个相同的组件。每个组件都是一个 table，您可以在其中 show/hide 列。

<Customtable>
   <child 1>
     ...
      <child 5>
</component 1>

<Customtable>
   <child 1>
     ...
      <child 5>
</component 1>

我有一些可观察对象，其中 child 5 通过 Observable 传递数据，该 Observable 是从 parent 中订阅的。 Child 5 发出订阅 -> 自定义table.

  Export Class ColumnDisplayService {
     visibleColumns = new BehavorSubject<Column[]>([]);

     visibleColumnObservable = this.visibleColumns.asObservable();


    updateVisibleColumns(columns: any[]){
      this.visibleColumns.next(colums);
    }
   }

然后 parent 组件 Customtable 订阅为

...
this.columnDisplayService.visibleColumnObservable.subscribe(columns => {
  ...set new visible columsn 
});

现在这适用于屏幕上有 1 个组件的情况。但是当我有 2 个组件时，它们都会更新。所以如果我过滤 <Customtable>，它会每隔 <Customtable> 过滤一次。但是我只希望 child 更新它的 parent 而不是其他订阅者。如果不使用 event.emit()

在每个 child 组件上发出事件，这是否可能？

Answer 1

我建议在您的父组件中提供 ColumnDisplayService（而不是在模块中或根组件中），这将允许您将 visibleColumnObservable 的实例彼此隔离，并且每个其中的一部分将用于此组件及其组件树。

@Component({
  //...
  providers: [ColumnDisplayService],
})
export class Customtable {
  constructor(private columnDisplayService: ColumnDisplayService) {
    //...
    // This service will be used in this component and its component tree:
    this.columnDisplayService.visibleColumnObservable.subscribe(columns => {
      ...set new visible columsn 
    });
  }
}

angular 可观察到仅更新它的 parent 页面上具有多个组件的订阅者

angular observable to only update it's parent subscriber with multiple components on the page

observable

rxjs

angular