即使在 Angular 8 中的 ngAfterViewInit 上，ViewChild elementRef 也未定義

Question

我正在將代碼從 Angular 5 升級到 Angular 8，但我面臨一個奇怪的問題（scrollContainer 和 scrollWrapper 在 ngAfterViewInit 中都未定義）：

組件.ts

@ViewChild('timelineScrollContainer',{ static: true}) set controlElRef(elementRef: ElementRef) {
this.scrollContainer = elementRef;
}

@ViewChild('timelineScroll',{ static: true}) set controlElWrapRef(elementRef: ElementRef) {
this.scrollWrapper = elementRef;
}

ngOnInit() {
this.initTimelineMonths();
this.isLoaded = true;
}

initTimelineMonths() {
  //Populate months array
  this.months = [];
}

ngAfterViewInit() { 
//scrollTimeLineToItem uses the elementRef of scrollContainer 
this.scrollTimeLineToItem(this.monthBoxComponents.last, false);
}

組件.html

<div class="timeline-scroll-wrapper" #timelineScroll *ngIf="months">
<div class="bar-labels label-left">
  <span>Federal</span>
  <span>State</span>
  <span>24 Month</span>
</div>
<div class="bar-labels label-right">
  <span>Federal</span>
  <span>State</span>
  <span>24 Month</span>
</div>
<div class="timeline-scroll-container" #timelineScrollContainer>
  <app-month-box *ngFor="let item of months; let i = index;"></app-month-box>
</div>

這里有什么問題？ 感謝您的投入。

謝謝

Answer 1

在您的component.ts ，進行以下更改。

@ViewChild('timelineScroll', { static: false }) divTimelineScrollRef: ElementRef<HTMLDivElement>;
@ViewChild('timelineScrollContainer', { static: false }) divTimelineScrollContainerRef: ElementRef<HTMLDivElement>;

...