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

执行此操作：-

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

parent.component.ts创建一个变量来存储子对象的引用，例如activeTab: string
```
setActiveChildTab(activeTab: string) {
    this.activeTab = activeTab;
}
```
在每个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）也通过亲子数据传输进行管理。

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

2 个答案: