前面提到的问题是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的子元素。

对我来说，问题是我引用了元素上的ID。

@ViewChild('survey-form') slides:IonSlides;

<div id="survey-form"></div>

而不是这样:

@ViewChild('surveyForm') slides:IonSlides;

<div #surveyForm></div>

如果一个*ngIf="show"阻止ViewChild被渲染，并且在你的show变为true后你需要ViewChild，它帮助我在我设置show为true后立即触发ChangeDetectorRef.detectChanges()。

在此之后，*ngIf创建组件并渲染ViewChild，你可以在之后使用它。只是输入了一个快速的示例代码。

@ViewChild(MatSort) sort: MatSort;    

constructor(private cdRef: ChangeDetectorRef) {}

ngOnInit() {
  this.show = false;
  this.someObservable()
    .pipe(
      tap(() => {
        this.show = true;
        this.cdRef.detectChanges();
      })
    )
    .subscribe({
      next: (data) => {
        console.log(sort)
        this.useResult(data);
      }
    });
}

这是坏事吗?还是为什么没有人提出?

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

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

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有效地将函数抛出到挂起操作列表的底部。

我修复它只是添加SetTimeout后设置可见的组件

我的HTML:

<input #txtBus *ngIf[show]>

我的组件JS

@Component({
  selector: "app-topbar",
  templateUrl: "./topbar.component.html",
  styleUrls: ["./topbar.component.scss"]
})
export class TopbarComponent implements OnInit {

  public show:boolean=false;

  @ViewChild("txtBus") private inputBusRef: ElementRef;

  constructor() {

  }

  ngOnInit() {}

  ngOnDestroy(): void {

  }


  showInput() {
    this.show = true;
    setTimeout(()=>{
      this.inputBusRef.nativeElement.focus();
    },500);
  }
}

如果你使用Ionic，你需要使用ionViewDidEnter()生命周期钩子。Ionic运行一些额外的东西(主要是与动画相关的)，这通常会导致像这样的意外错误，因此需要在ngOnInit、ngAfterContentInit等之后运行一些东西。