Как заполнить угловой вложенный компонент в цикле ngFor?

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 компоненты реализованы в базовом классе cehicle.

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.

BaseVehicleComponent:

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

MainComponent должен иметь onVehicleCreated() функция не BaseVehicleComponent.

MainComponent:

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

Для получения дополнительной информации, посмотрите мой ответ о связи между родительским и дочерним компонентами.