Angular 5中@ViewChild返回undefined问题求助

Hey there, let's work through why your @ViewChild reference is coming up undefined even after ngAfterViewInit runs. These are the most likely culprits and fixes:

• Check if the element is conditionally rendered
  If your #innerTabContent div is wrapped in a structural directive like *ngIf or *ngFor that's not active when ngAfterViewInit fires, the element won't exist in the DOM yet. To fix this, use a setter with @ViewChild that triggers whenever the element becomes available:

  @ViewChild('innerTabContent') set tabContentElement(el: ElementRef) {
    if (el) {
      // Access el.nativeElement here now that it's loaded
      console.log(el.nativeElement);
    }
  }
  

  This way, even if the element renders later (when the *ngIf condition becomes true), the setter will run and give you access to the element.

• Verify no typos in your selector
  Double-check that the template reference variable (#innerTabContent) matches exactly what's in your @ViewChild decorator. Angular is case-sensitive here, so a mismatch like #InnerTabContent vs @ViewChild('innerTabContent') would cause the reference to be undefined.

• Check for ChangeDetectionStrategy.OnPush
  If your component uses ChangeDetectionStrategy.OnPush, Angular might not have run change detection to initialize the @ViewChild reference. Inject ChangeDetectorRef and trigger detection manually in ngAfterViewInit:

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  ngAfterViewInit() {
    this.cdr.detectChanges();
    if (this.tabContentElement) {
      // Now try accessing nativeElement
    }
  }
  

• Avoid accessing the element too early
  Even though ngAfterViewInit is supposed to run after the view is initialized, nested components or complex templates might introduce a delay. The setter approach mentioned earlier is more reliable than relying solely on ngAfterViewInit.

内容的提问来源于stack exchange，提问作者dave0688