如何使用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>

ChildComponent：

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