1

当前代码有效，但肯定远非理想（我的意思可能不是 Angular 方式）。

我的组件可能会也可能不会投射外部内容。仅当组件的Input s 之一未未定义时，才会呈现投影内容所在的 div 包装器。setTimeout调用发生在前Input的设置器中以推迟一些 DOM 内容检查，告诉是否应该应用特定的类，changeDetectorRef.markForCheck()最终会相应地触发视图更新。

有人可以指导我应该做什么吗？ 

@Component({
    // Almost the whole the application uses OnPush change detection strategy
    changeDetection: ChangeDetectionStrategy.OnPush,
    template: `
    <!-- … -->
    <div #footer *ngIf="parameters"> <!-- the wrapper -->
      <ng-content select="'.external-buttons"></ng-content> <!-- injected content -->
    </div>
    `
})
export class cardComponent {
    @HostBinding('class.hasInjectedButtons') hasInjectedButtons: boolean;
    @ViewChild('footer') footer: ElementRef;

    @Input() set data(payload: wsDataScheme) {
        // …
        // Attempt to check whether the CSS class should be applied
        setTimeout(() => {
            this.hasInjectedButtons = this.footer
                ? this.footer.nativeElement.querySelector('.external-buttons') 
                : false
            ;
            this.changeDetectorRef.markForCheck();
        });
    }
}

尽管阅读了几篇使用如下图的文章，但我对 Angular 生命周期解析过程感到困惑。我希望“页脚” ViewChild在执行时被填充和访问，ngAfterViewCheck但似乎不是。玩弄生命周期钩子ngAfterContentCheck和ngOnChanges也对我没有帮助，ContentChild投影的内容引用装饰器也没有帮助。

Angular 生命周期钩子顺序

4

0 回答 0