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

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

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

它必须起作用。

但正如Günter Zöchbauer所说，模板中一定有其他问题。我创建了一个相关性问答。请检查浏览器控制台。

boot.ts

@Component({
selector: 'my-app'
, template: `<div> <h1> BodyContent </h1></div>

      <filter></filter>

      <button (click)="onClickSidebar()">Click Me</button>
  `
, directives: [FilterTiles] 
})


export class BodyContent {
    @ViewChild(FilterTiles) ft:FilterTiles;

    public onClickSidebar() {
        console.log(this.ft);

        this.ft.tiles.push("entered");
    } 
}

filterTiles.ts

@Component({
     selector: 'filter',
    template: '<div> <h4>Filter tiles </h4></div>'
 })


 export class FilterTiles {
     public tiles = [];

     public constructor(){};
 }

这招很管用。请仔细检查您的标签和参考资料。

谢谢……

使用[hidden]代替*ngif，因为*ngif在条件不满足时终止代码。

<div [hidden]="YourVariable">
   Show Something
</div>

我也遇到过类似的问题，我想我应该发布这篇文章，以防别人犯同样的错误。首先，要考虑的一件事是AfterViewInit;你需要等待视图被初始化，然后才能访问@ViewChild。但是，我的@ViewChild仍然返回null。问题出在我的*ngIf。*ngIf指令杀死了我的控件组件，所以我不能引用它。

import { Component, ViewChild, OnInit, AfterViewInit } from 'angular2/core';
import { ControlsComponent } from './controls/controls.component';
import { SlideshowComponent } from './slideshow/slideshow.component';

@Component({
  selector: 'app',
  template: `
    <controls *ngIf="controlsOn"></controls>
    <slideshow (mousemove)="onMouseMove()"></slideshow>
  `,
  directives: [SlideshowComponent, ControlsComponent],
})
export class AppComponent {
  @ViewChild(ControlsComponent) controls: ControlsComponent;

  controlsOn: boolean = false;

  ngOnInit() {
    console.log('on init', this.controls);
    // this returns undefined
  }

  ngAfterViewInit() {
    console.log('on after view init', this.controls);
    // this returns null
  }

  onMouseMove(event) {
    this.controls.show();
    // throws an error because controls is null
  }
}

编辑 正如下面@Ashg提到的，一个解决方案是使用@ViewChildren而不是@ViewChild。

对我来说有效的解决方案是在app.module.ts的声明中添加指令

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