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

时间:2018-01-23 06:07:53

标签: angular ng-switch

使用以下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代码中获得对所选组件的引用? e.g。

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

1 个答案:

答案 0 :(得分:2)

由于您有基类,因此您可以使用文档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());
}

<强> Example