我的解决方案是将ngIf从子组件的外部移动到子组件的内部，在一个div上包装了整个html部分。这样，当它需要隐藏时，它仍然被隐藏，但能够加载组件，我可以在父组件中引用它。

这对我很管用。

例如，我的名为' 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

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

你可以为@ViewChild()使用setter

@ViewChild(FilterTiles) set ft(tiles: FilterTiles) {
    console.log(tiles);
};

如果你有一个ngIf包装器，setter将被undefined调用，然后在ngIf允许它呈现时再次被引用调用。

但我的问题是另一回事。我没有在我的app.modules中包含我的“FilterTiles”模块。模板没有抛出错误，但是引用总是未定义的。

对我来说，使用ngAfterViewInit而不是ngOnInit修复了这个问题:

export class AppComponent implements OnInit {
  @ViewChild('video') video;
  ngOnInit(){
    // <-- in here video is undefined
  }
  public ngAfterViewInit()
  {
    console.log(this.video.nativeElement) // <-- you can access it here
  }
}

我修复它只是添加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);
  }
}

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

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