如何在 Angular 2 中获取对 ngSwitchCase 之后组件的引用

Question

使用以下html：

<div [ngSwitch]="type">
    <my-component-a *ngSwitchCase="'A'"></my-component-a>
    <my-component-b *ngSwitchCase="'B'"></my-component-b>
    <my-component-c *ngSwitchCase="'C'"></my-component-c>
    <my-component-d *ngSwitchDefault></my-component-d>
</div>

如何在 ts 代码中获取对所选组件的引用？例如

public getChosenComponent(): MyComponentBase {
    return ???;
}

Answer 1

由于您有基类，因此您可以使用文档中描述的一种方法 https://angular.io/guide/dependency-injection-in-action#find-a-parent-by-its-class-interface

您需要提供所有应该是所选组件的组件的MyComponentBase。例如，可以按如下方式声明CompB：

@Directive({
  selector: 'my-component-b',
  providers: [{ provide: MyComponentBase, useExisting: CompB }]
})
export class CompB {}

现在，您需要使用@ViewChild装饰器查询选定的组件：

@ViewChild(MyComponentBase) component: MyComponentBase;

然后，您将能够在视图渲染后获得选择的组件：

getChosenComponent(): MyComponentBase {
  return this.component;
}
ngAfterViewInit() {
  console.log(this.getChosenComponent());
}

例