Как общаться от дочерней до родительской страницы с помощью 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

В шаблоне вашего родительского компонента вы можете установить источник событий для вашего ребенка следующим образом:

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

Answer 2

Реализация вашего дочернего компонента правильная, теперь вам просто нужно послушать notifyParent событие в родительском и изменить значение на полученное, например:

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

И вот простая ДЕМО.