[解決済み] 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();
}
}
そうでなければ、同様の方法でそのような対象を含む共有サービスを活用することができます...。
関連
-
[解決済み] jQueryでチェックボックスに "checked "を設定する
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] JavaScriptで空文字列/未定義文字列/null文字列をチェックするにはどうすればよいですか?
-
[解決済み] jQueryの「exists」関数はありますか?
-
[解決済み] 動的に生成された要素にイベントバインディングを行うか?
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み] 親メソッドから子メソッドを呼び出す
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] <ng-content>が空かどうかを確認する方法は?(これまでのAngular 2+で)
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 文字列がすべて同じ部分文字列で構成されているかどうかを調べるにはどうすればよいですか?
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] bootstrap のポップオーバーがすべての要素の上に表示されない
-
[解決済み] JavaScriptで文字列を数値に変換する最速の方法は何ですか?
-
[解決済み] jQueryの$という記号の意味は何ですか?
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] BlobからArrayBufferへ移行する方法
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] モデルフェッチ時に1をtrueに、0をfalseに変換する方法