Ребенок прослушивает родительское событие в Angular 2

В angular docs есть тема о прослушивании дочерних событий от родителей. Это здорово. Но моя цель - это нечто обратное!. В моем приложении есть "admin.component", который содержит вид макета страницы администратора (меню боковой панели, панель задач, статус и т.д.). В этом родительском компоненте я настроил систему маршрутизатора для изменения основного вида между другими страницами администратора. Проблема заключается в том, чтобы сэкономить вещи после изменения, пользователь нажимает кнопку сохранения на панели задач (которая помещается в admin.component), а дочерний компонент должен прослушивать это событие щелчка для выполнения сохранения персонала.

Ответы

Ответ 1

Я думаю, что этот документ может быть вам полезен:

Фактически вы можете использовать наблюдаемый/предмет, который родитель предоставляет своим детям. Что-то вроде этого:

@Component({
  (...)
  template: `
    <child [parentSubject]="parentSubject"></child>
  `,
  directives: [ ChildComponent ]
})
export class ParentComponent {
  parentSubject:Subject<any> = new Subject();

  notifyChildren() {
    this.parentSubject.next('some value');
  }
}

Детский компонент может просто подписаться на эту тему:

@Component({
  (...)
})
export class ChildComponent {
  @Input()
  parentSubject:Subject<any>;

  ngOnInit() {
    this.parentSubject.subscribe(event => {
      // called when the notifyChildren method is
      // called in the parent component
    });
  }

  ngOnDestroy() {
    // needed if child gets re-created (eg on some model changes)
    // note that subsequent subscriptions on the same subject will fail
    // so the parent has to re-create parentSubject on changes
    this.parentSubject.unsubscribe();
  }

}

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

Ответ 2

Для потомков просто подумал, что я упомянул более традиционное решение для этого: просто получите ссылку на ViewChild и вызовите метод напрямую.

@Component({
  selector: 'app-child'
})
export class ChildComponent {

  notifyMe() {
    console.log('Event Fired');
  }
}

@Component({
  selector: 'app-parent',
  template: `<app-child #child></app-child>`
})
export class ParentComponent {

  @ViewChild('child')
  private child: ChildComponent;

  ngOnInit() {
    this.child.notifyMe();
  }
}