1

我正在使用BehaviorSubject充当子组件状态的

state = new BehaviorSubject<any>({transform: 'translate3d(0, 0, 0)'});
styleState = this.state.asObservable();

async在子组件模板中，我使用管道订阅状态

<div>{{ styleState | async | json }}</div>

然后我用滚动事件更新子组件状态

ngOnInit() {
  this.zone.runOutsideAngular(() => {

    fromEvent(this.el.nativeElement, 'scroll').pipe(
      tap((e: any) => {
        this.zone.run(() => {
          this.state.next({ scrollTop: e.target.scrollTop });
        });
      })
    ).subscribe();

  });
}

现在在父组件中，更改检测由子组件滚​​动事件触发

ngAfterViewChecked() {
  console.log('Parent View Checked!');
}

问题是逻辑依赖于滚动事件，我不希望它触发父组件中的更改检测。知道我OnPush在父组件和子组件中都使用更改检测策略

这是正常的吗？我怎样才能避免它？

这是一个最小的复制https://stackblitz.com/edit/angular-hkwvy4?file=src%2Fapp%2Fhello.component.ts

4

1 回答 1

0

这已经很晚了，但对于仍在寻找解决方案的任何人：

为什么会发生这种情况： 异步管道很特殊，是OnPush 更改检测策略所关注的。本文有一个专门介绍异步管道的部分，其中包含完整的解释以及许多其他相关信息：https ://www.mokkapps.de/blog/the-last-guide-for-angular-change-detection-你永远需要/

潜在的替代方案： 有很多方法可以做到这一点，但这里有一个快速的解决方案，它可以完成子组件内滚动的更改检测，并且不会触发父组件中的更改检测。 https://stackblitz.com/edit/angular-b3ubyo?file=src%2Fapp%2Fhello.component.ts

于 2020-10-16T23:44:47.627 回答