angular - 将 ng-content 元素的宽度设置为通过的子元素的大小

Question

我有一个看起来像这样的 View :

<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';
}

这修复了错误，但是现在宽度始终设置为零，并且它不会获取子项的渲染大小。

Answer 1

我发现使用 ngAfterContentInit 是正确的生命周期钩子(Hook)并解决了我的问题。