将 angular 事件从子级填充到父级

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();
  }
}

那么，有什么方法可以在 ParentComponent 中触发 onSubCreated() 吗？我不想在 ParentComponent 模板中移动 <sub [name]="settings.subSettings.name"></sub>。

Stackblitz working applcation is here.

Answer 1

试试这个

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

希望对您有所帮助

将 angular 事件从子级填充到父级

Populating angular event from hild to parent

angular

angular7