Заполнение углового события от ребенка до родителя

Question

Я хочу запустить событие из родительского элемента и подписать его из родительского компонента.

import { Component, Output, Input, EventEmitter, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <p>Hello</p>
    <parent [name]="settings.parentSettings.name" (subCreated)="onSubCreated()">
      <sub [name]="settings.subSettings.name"></sub>
    </parent>
  `
})
export class AppComponent  {
  name = 'Angular';
  settings:any ={
    parentSettings: {
      name: "P"
    },
    subSettings:{
      name: "S"
    }
  }
}


@Component({
  selector: 'parent',
  template: `<ng-container></ng-container>`
})
export class ParentComponent  {
  @Input() name: string;

  onSubCreated(){
    console.log("on sub created.");
  }
}



@Component({
  selector: 'sub',
  template: `<ng-container></ng-container>`
})
export class SubComponent implements OnInit {
  @Input() name: string;
  @Output() subCreated: EventEmitter<void> = new EventEmitter<void>();

  ngOnInit(){
    this.subCreated.emit();
  }
}

Итак, есть ли способ вызвать onSubCreated () в ParentComponent?Я не хочу перемещать <sub [name]="settings.subSettings.name"></sub> в шаблоне ParentComponent.

Рабочее приложение Stackblitz здесь.

Answer 1

Попробуйте это

 <parent [name]="settings.parentSettings.name" #parent>
      <sub [name]="settings.subSettings.name" (subCreated)="parent.onSubCreated()">
    </parent>

Надеюсь, это поможет