В angular docs есть тема о прослушивании дочерних событий от родителей. Это здорово. Но моя цель - это нечто обратное!. В моем приложении есть "admin.component", который содержит вид макета страницы администратора (меню боковой панели, панель задач, статус и т.д.). В этом родительском компоненте я настроил систему маршрутизатора для изменения основного вида между другими страницами администратора. Проблема заключается в том, чтобы сэкономить вещи после изменения, пользователь нажимает кнопку сохранения на панели задач (которая помещается в admin.component), а дочерний компонент должен прослушивать это событие щелчка для выполнения сохранения персонала.
Ребенок прослушивает родительское событие в Angular 2
Ответ 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();
}
}