1. ホーム
  2. javascript

[解決済み] Angular 2で子オブジェクトが親イベントをリッスンする

2023-03-28 16:04:15

質問

angularのドキュメントに、親からの子イベントをリッスンするというトピックがあります。それは結構なことです。しかし、私の目的は何か逆です!。私のアプリには、管理ページのレイアウトビュー(サイドバーメニュー、タスクバー、ステータスなど)を保持する 'admin.component' があります。 この親コンポーネントで、管理者の他のページ間でメインビューを変更するためのルータシステムを構成しました。 問題は、変更後に保存するために、ユーザーがタスクバーの保存ボタン(admin.componentに配置されている)をクリックし、子コンポーネントは、保存スタッフを行うためにそのクリックイベントをリッスンする必要があります。

どのように解決するのですか?

このドキュメントがお役に立つと思います。

実際、親が子に提供するobservable/subjectを活用することができます。そのようなものです。

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

}

そうでなければ、同様の方法でそのような対象を含む共有サービスを活用することができます...。