如何在 ngFor 循環中填充 Angular 嵌套組件？

Question

我在 html 端有一個嵌套組件，如下所示：

<main>
   <ng-content *ngFor="let item in data">
     <car *ngIf="item.type=='car'"></car>
     <plane *ngIf="item.type=='car'"></plane>
   </ng-content>
</main>

我的car和plane部件都實現了一個基礎車 class。

export abstract class BaseVehicleComponent{
    onVehicleCreated(){
        console.log("on vehicle created.")
    }
}

創建車輛時，我想在main組件中填充一個事件。

@Component({
   selector: 'main',
})
export class MainComponent{

     @Output() vehicleCreated = new EventEmitter<void>();

}

hml 更新如下：

<main (vehicleCreated)="onVehicleCreated($event)">
   <ng-content *ngFor="let item in data">
     <car *ngIf="item.type=='car'"></car>
     <plane *ngIf="item.type=='car'"></plane>
   </ng-content>
</main>

但基本方法不會觸發。

Answer 1

BaseVehicleComponent應該有EventEmitter而不是MainComponent 。

基礎車輛組件：

export abstract class BaseVehicleComponent{
   @Output() vehicleCreated = new EventEmitter<void>();
}

MainComponent應該有onVehicleCreated() function 而不是BaseVehicleComponent 。

主要組件：

export class MainComponent{  
  onVehicleCreated(){
    console.log("on vehicle created.")
  }
}     

在car或plane組件的ngOnInit()方法中調用事件發射器的emit()方法。

this.vehicleCreated.emit();

MainComponent的模板修改為

<ng-container *ngFor="let item in data">
  <car *ngIf="item.type=='car' (vehicleCreated)="onVehicleCreated($event)"></car>
  <plane *ngIf="item.type=='plane' (vehicleCreated)="onVehicleCreated($event)"></plane>
</ng-container>

StackBlitz 上的現場演示： https://stackblitz.com/edit/angular-thvzue

有關更多信息，請查看我關於父子組件之間通信的答案。