最近、Angular5を試していますが、他のコンポーネントでイベントをトリガーするためのベストプラクティスを知りたいです。
これが今の私のアプリケーション構造です：
index.html
<main-app></main-app>
app.component.html
<main-navbar></main-navbar>
<router-outlet></router-outlet>
<auth-modal></auth-modal>
authモーダルコンポーネント
import { Component, EventEmitter } from '@angular/core';
@Component({
selector: 'auth-modal',
templateUrl: 'modal.component.html'
})
export class AuthModal {
hidden: boolean = true;
closed: EventEmitter<any> = new EventEmitter();
close(event: KeyboardEvent){
this.hidden = !this.hidden;
this.closed.next(true);
event.stopPropagation();
}
}
したがって、main-navbarコンポーネントは基本的にhtmlであり、内部にロジックはありません。私がアプローチしようとしているのは、カスタムモーダル（ブートストラップなど）を構築することです。そのため、ナビゲーションバーのボタンをクリックすると、モーダルコンポーネントがトリガーされ、開きます。
コードではなく、どのアプローチに従うべきかを教えてください。
私はこれについて検索しましたが、主な目的は望ましい結果を達成することではなく学習することであるため、サードパーティのパッケージを使用するのは好きではありません。
解決
https://stackoverflow.com/users/6036154/embarqとhttps://stackoverflow.com/users/271012/ryanのおかげで私はここで解決策を得ました：https：//angular-jswxqi.stackblitz.io/
モーダルを制御するためのサービスを実装することを提案します。このサービスのプロトタイプは
enum ModalState { Close, Open }
class ModalController {
public readonly modalState$: Subject<ModalState>;
constructor() {
this.modalState$ = new Subject<ModalState>();
}
public open() {
this.modalState$.next(ModalState.Open);
}
public close() {
this.modalState$.next(ModalState.Close);
}
}
したがって、この最小限の実装は次のように使用できます。
ModalController.modalState$は変更をサブスクライブして処理しますModalService.openそしてModalService.close全体アプリで任意のコンポーネントが使用することができますこの記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加