0

出于性能原因，我试图在我的组件上设置手动更改检测。

应用程序的结构：App -> Book(s) -> Page(s)

我在 AppComponent 中订阅了一个 observable，然后运行 ​​ChangeDetectorRef 的“markForCheck”方法。

这似乎触发了 BookComponent（我标记为更新的组件的子组件）中的 ngAfterContentChecked 方法。

这让我相信父组件中的“markForCheck”也会更新所有子组件。

但是，即使在子组件（BookComponent）中执行了 ngAfterContentChecked，该组件的模板也不会更新！

我是否应该听取每个孩子的可观察性（有时在组件层次结构中有几个层次）？还是我做错了什么？为什么即使模板没有更新，ngAfterContentChecked 也会在子组件中执行？

一些相关的代码。

@Component({
    selector: 'app',
    directives: [BookComponent],
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <book *ngIf="_book" [book]="_book" [style.height]="_availableDimensions.height+'px'" (window:resize)="onResize($event)"></book>
        <footer id="footer"></footer>
    `
})

export class PlayerComponent {
    ngOnInit() {
        this.initScale();
    }

initScale(){
        this._playerService.availableDimensions$.subscribe(
            availableDimensions => {
                // set local availableDimensions variable
                this._availableDimensions = availableDimensions;
                this._cd.markForCheck();
            }
        );
    }
}



@Component({
    selector: 'book',
    directives: [PageComponent],
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
        <div id="pageScrollZone">
            <div id="pageHolder" [ngStyle]="pageHolderStyles()"></div>
        </div>
    `
})

export class BookComponent {
    constructor(
            private _cd: ChangeDetectorRef,
            private _playerService: PlayerService,
            private _config: Config
    ){}

    ngAfterContentChecked(){
// This part does execute when the observable changes
        let date = new Date();
        console.log('BOOK: '+date.getHours()+':'+date.getMinutes()+':'+date.getSeconds());
    }

    pageHolderStyles(){
// This part does NOT execute when the observable changes
        let styles = {
            marginTop: this._currentMargin.y+'px',
            transform: 'scale('+ (this._baseZoom * this._currentZoomLevel) +')'
        }

        return styles;
    }
}
4

1 回答 1

2

Sooo...两件快速的事情..

首先，当你使用markForCheck()它时，它会在组件ITSELF和ROOT COMPONENT之间进行标记，以标记 Angular 应该运行更改检测的路径。

来自一篇很棒的思想文章： 树

“我们可以通过依赖注入访问组件的 ChangeDetectorRef，它带有一个名为 markForCheck() 的 API。这个方法完全符合我们的需要！它标记从我们的组件到根的路径，以便检查下一次更改检测运行。”

因此，当您触发它时，它不会查看它自己的子组件，它会查看根组件。如果它的孩子也是 onPush 他们将忽略它的更新。

我是否应该听取每个孩子的可观察性（有时在组件层次结构中有几个层次）？

仅当您希望所有元素都显式地 onPush 时。我的猜测是你希望页面自动更新，如果它的父母这样做......那么你很幸运！如果您在 pages 组件上使用标准策略并在Book上使用onPush 策略，当检测沿着树向下运行时，它将跳过该分支，即使子组件是正常组件。资料来源：维克多·萨夫金

所以不，你不必深入聆听观察者，只要你想休息的地方。如果您必须诱使每个组件正常工作，则 onPush 的每个组件都不能保证性能提升。在大多数情况下，只需阻塞关键节点就足够了。

第二件事是关于ngAfterContentChecked 这是一个已知的错误：

（完全相同）https://github.com/angular/angular/issues/7055

（相关的，更好的讨论）https://github.com/angular/angular/issues/7054

所以他们知道了，它实际上并不是在运行检测，而是在触发回调......

于 2016-05-28T04:16:08.063 回答