Question

我有一个父组件A和很多（超过20个）子组件，它们全部都扩展了A并且位于<ng-content></ng-content>内。在组件A中，我在多个位置设置了showContent变量的值。

问题是我在所有子组件中都使用*ngIf="showContent"。因为更改A中的值时子组件的视图不会更新，所以我可以：

A）使用Output + EventEmitter，但我不希望拥有

onValueChange(val: boolean) {
  this.showContent = val;
}

在每个子组件中（相同代码的20倍以上）；

B）使用异步管道。问题是我在GET / POST订阅中设置值

this.httpDataHandler.get<...>(...).subscribe(response => {
    // lots of stuff
    showContent = true;
});

是否可以使用异步管道并从所有子级中删除冗余代码？

Answer 1

我猜您可以在这里使用BehaviorSubject：

showContent = new BehaviorSubject(false)
...
this.httpDataHandler.get<...>(...).subscribe(response => {
  // lots of stuff
  showContent.next(true);
});
...
*ngIf="showContent | async"

或使用ChangeDetectorRef

constructor(private cdr: ChangeDetectorRef) {}
... 
this.httpDataHandler.get<...>(...).subscribe(response => {
  // lots of stuff
  showContent = true;
  this.cdr.markForCheck();
});
...
*ngIf="showContent"

通常，当您遇到此类问题时，您将尽早从可观察对象中提取数据。您可以通过一些重构来避免订阅，这是一个更好的解决方案。但是，如果没有完整的代码，很难知道如何...

角度：通过自定义设置变量值来使用异步管道

1 个答案: