我有一个类似的问题，在ViewChild被引用之前，ViewChild在一个switch子句中没有加载ViewChild元素。我以一种半hack的方式解决了这个问题，但将ViewChild引用包装在立即执行的setTimeout中(即0ms)

前面提到的问题是ngIf导致视图未定义。答案是使用ViewChildren而不是ViewChild。我有类似的问题，我不想要一个网格显示，直到所有的参考数据已经加载。

html:

   <section class="well" *ngIf="LookupData != null">
       <h4 class="ra-well-title">Results</h4>
       <kendo-grid #searchGrid> </kendo-grid>
   </section>

组件代码

import { Component, ViewChildren, OnInit, AfterViewInit, QueryList  } from '@angular/core';
import { GridComponent } from '@progress/kendo-angular-grid';

export class SearchComponent implements OnInit, AfterViewInit
{
    //other code emitted for clarity

    @ViewChildren("searchGrid")
    public Grids: QueryList<GridComponent>

    private SearchGrid: GridComponent

    public ngAfterViewInit(): void
    {
        
        this.Grids.changes.subscribe((comps: QueryList <GridComponent>) =>
        {
            this.SearchGrid = comps.first;
        });

       
    }
}

这里我们使用了ViewChildren，你可以在它上面监听变化。在本例中，任何引用#searchGrid的子元素。

这对我很管用。

例如，我的名为' My -component'的组件使用*ngIf="showMe"来显示 像这样:

<my-component [showMe]="showMe" *ngIf="showMe"></my-component>

因此，当组件初始化时，直到"showMe"为真，组件才会显示出来。因此，我的@ViewChild引用都没有定义。

这是我使用@ViewChildren和它返回的QueryList的地方。参见QueryList上的angular文章和@ViewChildren使用演示。

你可以使用@ViewChildren返回的QueryList，并使用rxjs订阅对引用项的任何更改，如下所示。@ViewChild没有这个能力。

import { Component, ViewChildren, ElementRef, OnChanges, QueryList, Input } from '@angular/core';
import 'rxjs/Rx';

@Component({
    selector: 'my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnChanges {

  @ViewChildren('ref') ref: QueryList<any>; // this reference is just pointing to a template reference variable in the component html file (i.e. <div #ref></div> )
  @Input() showMe; // this is passed into my component from the parent as a    

  ngOnChanges () { // ngOnChanges is a component LifeCycle Hook that should run the following code when there is a change to the components view (like when the child elements appear in the DOM for example)
    if(showMe) // this if statement checks to see if the component has appeared becuase ngOnChanges may fire for other reasons
      this.ref.changes.subscribe( // subscribe to any changes to the ref which should change from undefined to an actual value once showMe is switched to true (which triggers *ngIf to show the component)
        (result) => {
          // console.log(result.first['_results'][0].nativeElement);                                         
          console.log(result.first.nativeElement);                                          

          // Do Stuff with referenced element here...   
        } 
      ); // end subscribe
    } // end if
  } // end onChanges 
} // end Class

希望这能帮助一些人节省一些时间和挫折。

除了其他答案，你还可以使用最后一个生命周期钩子:

ngAfterViewChecked() {}

甚至在ngAfterViewInit之后调用ngAfterViewChecked

生命周期钩子:https://angular.io/guide/lifecycle-hooks#lifecycle-event-sequence

角: 在HTML中更改*ngIf的显示样式为'block'或'none'。

selector: 'app',
template:  `
    <controls [style.display]="controlsOn ? 'block' : 'none'"></controls>
    <slideshow (mousemove)="onMouseMove()"></slideshow>
`,
directives: [SlideshowComponent, ControlsComponent]

在我的例子中，我知道子组件将始终存在，但希望在初始化子组件之前更改状态以节省工作。

我选择对子组件进行测试，直到它出现并立即进行更改，这为我节省了对子组件的更改周期。

export class GroupResultsReportComponent implements OnInit {

    @ViewChild(ChildComponent) childComp: ChildComponent;

    ngOnInit(): void {
        this.WhenReady(() => this.childComp, () => { this.childComp.showBar = true; });
    }

    /**
     * Executes the work, once the test returns truthy
     * @param test a function that will return truthy once the work function is able to execute 
     * @param work a function that will execute after the test function returns truthy
     */
    private WhenReady(test: Function, work: Function) {
        if (test()) work();
        else setTimeout(this.WhenReady.bind(window, test, work));
    }
}

注意，您可以为setTimeout添加一个最大尝试次数或添加几个ms的延迟。setTimeout有效地将函数抛出到挂起操作列表的底部。