我有一个看起来像这样的观点：
<base-carousel>
<div *ngFor="let item of items" carouselItem>
<!-- content -->
</div>
</base-carousel>
base-carousel 的模板如下所示：
<div [style.width]="getTrackWidth()">
<ng-content select="[carouselItem]"></ng-content>
</div>
并且 base-carousel 的类看起来像这样：
@ContentChildren(CarouselItem, {read: ElementRef}) items: ElementRef[];
getTrackWidth(): string {
return this.items.reduce((accum, curr) =>
accum + curr.nativeElement.clientWidth, 0) + 'px';
}
问题是这会引发错误： ExpressionChangedAfterItHasBeenCheckedError
然后我尝试将 [style.width] 更改为指向一个简单的变量，我的类看起来更像这样：
trackWidth = '100%';
ngAfterViewInit() {
this.setTrackWidth();
this.changeDetector.detectChanges();
}
setTrackWidth(): string {
this.trackWidth = this.items.reduce((accum, curr) =>
accum + curr.nativeElement.clientWidth, 0) + 'px';
}
这解决了错误，但现在宽度始终设置为零，并且它不会获取子项的渲染大小 .
1 回答
我发现使用
ngAfterContentInit是正确的生命周期钩子使用并解决了我的问题 .