Дитина слухає батьківську подію в Angular 2

У кутових документах є тема про прослуховування дитячих подій від батьків. Це добре. Але моя мета - щось зворотне !. У моєму додатку є "admin.component", який містить вигляд макета сторінки адміністратора (меню бічної панелі, панель завдань, стан тощо). У цьому батьківському компоненті я налаштував систему маршрутизатора для зміни основного подання між іншими сторінками адміністратора. Проблема полягає в збереженні речей після змін, користувач натискає кнопку збереження на панелі завдань (яка розміщується в admin.component), а дочірній компонент повинен прослухати цю подію клацання для виконання персоналу збереження.

Я думаю, що цей документ може бути вам корисним:

• https://angular.io/docs/ts/latest/cookbook/component-communication.html

Насправді ви могли б використовувати спостережуваний предмет, який батько надає своїм дітям. Щось таке:

@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();
  }

}

В іншому випадку ви можете використати спільну послугу, що містить таку тему, подібним чином ...

Заради нащадків я просто подумав, що я згадаю про більш традиційне рішення цього : просто отримайте посилання на 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();
  }
}

Тут я б міг підходити до більш оголених кісток, якщо я правильно зрозумію питання. Припущення -

• OP має кнопку збереження в батьківському компоненті
• Дані, які потрібно зберегти, містяться у дочірніх компонентах
• До всіх інших даних, які можуть знадобитися дочірньому компоненту, можна отримати доступ із сервісів

У батьківському компоненті

<button type="button" (click)="prop1=!prop1">Save Button</button>
<app-child-component [setProp]='prop1'></app-child-component>

І в дитині ..

prop1:boolean;
  @Input()
  set setProp(p: boolean) {
    // -- perform save function here
}

Це просто посилає клацання кнопки дочірньому компоненту. Звідти дочірній компонент може зберігати дані самостійно.

РЕДАКТУВАТИ: якщо дані з батьківського шаблону також потрібно передавати разом із натисканням кнопки, це також можливо при такому підході. Повідомте мене, якщо це так, і я оновлю зразки коду.

Для тих, хто отримує Cannot read property 'notifyMe' of undefined

Спробуйте викликати метод всередині ngAfterViewInit()intead зngOnInit()