如何使用 EventEmitters 从子页面到父页面进行通信

Question

我是 Angular 的新手，我现在正在使用 Angular 开发离子应用程序，我的要求是使用事件发射器从子页面到父页面进行通信（只想从子页面更改父页面标题，我的代码如下，请建议我如何我这样做），我什至不知道这个概念有人可以帮助我吗

parent.html:-

<ion-header>

  <ion-navbar>
    <button menuToggle left>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>{{title}}</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
</ion-content>

parnet.ts：

export class Parent{
  title:string;
  getNotification(evt) {
    this.title = ""+evt;
   }
}

child.html:

<ion-content padding>
    <h2>Grocery Page</h2>
    <button ion-button (click)="sendNotification()" color="secondary" full>Notify my parent!</button>
</ion-content>

child.ts:

export class Child{

  @Output() notifyParent: EventEmitter<any> = new EventEmitter();
  sendNotification() {
    this.notifyParent.emit('Parent Page');
   }
}

Answer 1

您的子组件的实现是正确的，现在您只需要在父组件中侦听notifyParent 事件并将值更改为接收一个，如下所示：

<child-component (notifyParent)="getNotification($event)"></child-component>

这是一个简单的DEMO。

Answer 2

在您的父组件的模板上，您可以为您的子组件设置一个事件发射器，如下所示，

<child (notifyParent) = "getNotification($event)"></child>

子组件：

export class Child{

   @Output() notifyParent: EventEmitter<string> = new EventEmitter();

   sendNotification() {
     this.notifyParent.emit('Parent Page');
   }
}

父组件：

export class Parent{
  title:string;
  getNotification(evt) {
     this.title = evt;
  }
}