我也遇到过类似的问题，我想我应该发布这篇文章，以防别人犯同样的错误。首先，要考虑的一件事是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。

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

在我的例子中，我有一个使用ViewChild的输入变量setter，而ViewChild在*ngIf指令中，所以setter试图在*ngIf渲染之前访问它(没有*ngIf它可以正常工作，但如果它总是被*ngIf="true"设置为真，它就不会工作)。

为了解决这个问题，我使用Rxjs来确保任何对ViewChild的引用都要等到视图被初始化。首先，创建一个在view init之后完成的Subject。

export class MyComponent implements AfterViewInit {
  private _viewInitWaiter$ = new Subject();

  ngAfterViewInit(): void {
    this._viewInitWaiter$.complete();
  }
}

然后，创建一个在主题完成后接受并执行lambda的函数。

private _executeAfterViewInit(func: () => any): any {
  this._viewInitWaiter$.subscribe(null, null, () => {
    return func();
  })
}

最后，确保对ViewChild的引用使用了这个函数。

@Input()
set myInput(val: any) {
    this._executeAfterViewInit(() => {
        const viewChildProperty = this.viewChild.someProperty;
        ...
    });
}

@ViewChild('viewChildRefName', {read: MyViewChildComponent}) viewChild: MyViewChildComponent;

它必须起作用。

但正如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(){};
 }

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

谢谢……

这对我来说是可行的，参见下面的示例。

import {Component, ViewChild, ElementRef} from 'angular2/core'; @Component({ selector: 'app', template: ` <a (click)="toggle($event)">Toggle</a> <div *ngIf="visible"> <input #control name="value" [(ngModel)]="value" type="text" /> </div> `, }) export class AppComponent { private elementRef: ElementRef; @ViewChild('control') set controlElRef(elementRef: ElementRef) { this.elementRef = elementRef; } visible:boolean; toggle($event: Event) { this.visible = !this.visible; if(this.visible) { setTimeout(() => { this.elementRef.nativeElement.focus(); }); } } }

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