子供はAngular2で親イベントをリッスンします

Angularドキュメントには、親からの子イベントのリッスンに関するトピックがあります。それはいいです。しかし、私の目的は何か逆です！。私のアプリには、管理ページのレイアウトビュー（サイドバーメニュー、タスクバー、ステータスなど）を保持する「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への参照を取得し、そのメソッドの1つを直接呼び出すだけです。

@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()代わりにメソッドを呼び出してみてくださいngOnInit()