Angular2 - NgSwitch 中的模板引用

Question

我有一个 NgSwitch 模板。在 NgSwitch 中，我想获得对初始化模板的模板引用。像这样:

    <div class="container" [ngSwitch]="model.type">
        <first-component #ref *ngSwitchCase="0"></first-component>
        <second-component #ref *ngSwitchCase="1"></second-component>
        <third-component #ref *ngSwitchCase="2"></third-component>
    </div>

当单击组件中的按钮时，我想调用初始化组件(第一/第二/第三)到一个方法(定义在所有这 3 个组件实现的接口(interface)上)。问题是 ViewChild 未定义。如果我将 #ref 移动到容器 div，如下所示:

<div class="container" #ref [ngSwitch]="model.type">
    <first-component *ngSwitchCase="0"></first-component>
    <second-component *ngSwitchCase="1"></second-component>
    <third-component *ngSwitchCase="2"></third-component>
</div>

ViewChild(模板引用)已初始化，然后我可以调用组件的方法。

如何同时使用 NgSwitch 指令和模板引用变量？或者，另一方面，我如何从其父级调用已初始化的组件(在我将 #ref 移动到容器 div 的情况下)。

Answer 1

如果您在 ngSwitchCase 中使用模板引用变量，它会起作用，这样:

<div class="container" [ngSwitch]="model.type">
    <first-component #ref *ngSwitchCase="0"></first-component>
    <second-component #ref *ngSwitchCase="1"></second-component>
    <third-component #ref *ngSwitchCase="2"></third-component>
</div>

请注意，如果您有:

export class SomeComponent {

  @ViewChild('ref') ref;
...

Then ref 在调用构造函数时尚未设置。甚至不在 init 上。仅在 View 初始化之后。

这样，使用以下组件:

export class AppComponent implements OnInit, AfterViewInit {
  model = {type: 0};

  @ViewChild('ref') ref;

  constructor() {
    console.log('constructor:', this.ref);
  }
  ngOnInit() {
    console.log('ngOnInit:', this.ref);
  }
  ngAfterViewInit() {
    console.log('AfterViewInit:', this.ref);
  }

}

输出是:

constructor: undefined
ngOnInit: undefined
AfterViewInit: FirstComponent {...}

参见 demo plunker here .