Текущий код работает, но, безусловно, далек от идеала (я имею в виду, вероятно, не угловой путь).
Мой компонент может отображать или не отображать внешний контент. Оболочка div , в которую будет помещаться проецируемое содержимое, отображается только тогда, когда один из компонентов Input s не является неопределенным. Вызов 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 проектировщик декораций проецируемой ссылки на контент.
