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>

当点击组件中的按钮时，我想调用一个方法的初始化组件（第一个/第二个/第三个）（它在所有这三个组件实现的接口上定义）。问题是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;
...

则在调用构造函数时，尚未将ref设置为。甚至在初始化时都没有。仅在视图初始化之后。

通过这种方式，使用以下组件：

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 {...}

请参阅此处的演示plunker。

Answer 2

模板引用变量不应与结构指令一起使用。这里解释了一个原因：Thomas Hilzendegen的博客

我的解决方案是为使用[ngSwitch]的容器标记创建一个模板引用变量，然后使用它的children属性访问它的child。例如

<div [ngSwitch]="..." [class.error] = "(elem.children.item(0).className.indexOf('someClass') !== -1" #elem> 
... 
</div>

Answer 3

此外，您可以在不使用任何模板引用的情况下使用forwardRef，如下所示：

@Component({
    ...
    selector: 'first-component',
    providers: [{
        provide: BaseEnumeratedComponent,
        useExisting: forwardRef(() => FirstComponent)
    }]
})

并使用父组件中的ngAfterViewInit()访问使用切换情况的组件列表。或者，如果您想访问某个，请使用provide: FirstComponent