Angular，单击按钮即可动态获取组件引用

Question

根据某些条件，我有可以包含10个不同子组件之一的组件。

<div *ngIf="type === 1">
    <component_1></component_1>
</div>

<div *ngIf="type === 2">
    <component_2></component_2>
</div>

<div *ngIf="type === 3">
    <component_3></component_3>
</div>
...

在该组件中，我需要一个可以随时返回正确的子组件引用的方法（例如，单击按钮时）。

getComponentRef() {
  switch (this.type) {
     case 1: {
       // return component_1 ref;
       break;
     }
     case 2: {
       // return component_2 ref;
       break;
     }
     case 3: {
       // return component_3 ref;
       break;
     }
     ...
   }
}

任何想法 ？

Answer 1

做这个：-

1. parent.component.html

    <div *ngIf="type === 1"> <component_1 (emittedEvent)="setActiveChildTab($event)"></component_1> </div> <div *ngIf="type === 2"> <component_2 (emittedEvent)="setActiveChildTab($event)"></component_2> </div> <div *ngIf="type === 3"> <component_3 (emittedEvent)="setActiveChildTab($event)"></component_3> </div> ... 

2. parent.component.ts创建一个变量来存储子activeTab: string的引用，例如activeTab: string

    setActiveChildTab(activeTab: string) { this.activeTab = activeTab; } 

3. 在每个child.component.ts创建一个变量以发出活动选项卡，例如
   @Output() emittedEvent: EventEmitter<any> = new EventEmitter() 。

    ngOnInit() { this.emittedEvent.emit('Child1'); } 

让我知道它是否有效。

Answer 2

1）您已经在ngIf输入了value。 您可以使用它。

2）您需要在通用服务文件中创建一个EventEmitter 。

这样，您可以从所有组件的ngOnInit()发出标志，并订阅该组件。

3）您也可以通过Cookie进行管理。

4）还通过亲子数据传输进行管理。