角2サービス+ RxJSの動作オブジェクトまたはイベントエフェクタ

Question

角度2およびRXJSの新機能です。私はアプリケーションのさまざまな部分で2つの異なるナビゲーション指示をアクティブにする必要があります2つのトリガー（ボタン）とカスタムヘッダーコンポーネントがあります。私は、2つの異なるナビゲーション指示を登録するサービスを作成し、ヘッダーコンポーネントはこれに加入しています。クリックしたトリガーに応じて、各ディレクティブのopen（）およびclose（）関数を呼び出すためにヘッダーのボタンをリンクする最良の方法が何であるか知りたかったのです。

注：ナビゲーションはページのどこでもかまいませんので、ViewChildまたはContentChildを使用することはできません。それらは異なるCustomComponentに存在することができ、必ずしもヘッダコンポーネントの子である必要はありません。

私は2つのオプションを考えることができます。サービスにおける2つのナビゲーションディレクティブのための2つの別々の観測/ BehaviorSubjectsを作成し、ヘッダがそれらに開閉メッセージを渡すと、個々のナビゲーション・ディレクティブは、サブスクライブ持たせ

1. 対応するObservablesのそれぞれに送信します。
2. EventEmittersを使用しますが、この方法を使用する方法がわかりません。

この問題を解決するにはどうすればよいですか？

ナビゲーションを含むカスタムコンポーネント：

@Component({ 
    selector: 'my-app', 

    template: ` 
    <h1>{{title}}</h1> 
    <my-custom-header> 
     This is some text inside the header 
    </my-custom-header> 
    <nav custom-nav-1>Custom Nav 1</nav> 
    <nav custom-nav-2>Custom Nav 2</nav> 
    ` 
}) 
export class AppComponent { 
    title = 'Hello!'; 
} 

ヘッダーコンポーネント：

@Component({ 
    selector: 'my-custom-header', 

    template: ` 
    <div class="container"> 
     This is a header 
     <ng-content></ng-content> 
     <div>Number of Nav Registered: {{noOfNav}}</div> 
     <button type="button" (click)="toggleNav1()">Toggle Nav 1</button> 
     <button type="button" (click)="toggleNav2()">Toggle Nav 2</button> 
    </div> 
    `, 
    styles: ['.container { border: 1px solid; }'], 
}) 
export class HeaderComponent { 
    title = 'Hello!'; 
    noOfNav = 0; 

    constructor(private navService: NavService) {} 

    ngOnInit() { 
    this.navService._navSubject.subscribe({ 
     next: (id) => { 
     if(id!=0) { 
      this.noOfNav++; 
     } 
     } 
    }); 
    } 

    toggleNav1() { 
    console.log("Toggle Nav 1"); 
    } 

    toggleNav2() { 
    console.log("Toggle Nav 2"); 
    } 
} 

NavService：

@Injectable() 
export class NavService { 
    public _navSubject: BehaviodSubject = new BehaviorSubject<number>(0); 

    registerNavId(id: number) { 
    this._navSubject.next(id); 
    } 
} 

Nav1Directive

@Directive({ 
    selector: '[custom-nav-1]' 
}) 
export class NavDirective1 { 
    constructor(private navService: NavService) {} 

    ngOnInit() { 
    this.navService.registerNavId(1); 
    } 

    isOpen() { 
    console.log("isOpen"); 
    } 

    open() { 
    console.log("Open Nav"); 
    } 

    close() { 
    console.log("Close Nav"); 
    } 
} 

Nav2Directive：

@Directive({ 
    selector: '[custom-nav-2]' 
}) 
export class NavDirective2 { 
    constructor(private navService: NavService) {} 

    ngOnInit() { 
    this.navService.registerNavId(2); 
    } 

    isOpen() { 
    console.log("isOpen"); 
    } 

    open() { 
    console.log("Open Nav 2"); 
    } 

    close() { 
    console.log("Close Nav 2"); 
    } 
} 

Plunker：https://plnkr.co/edit/3ISyH7ESoNlt65J56Yni?p=preview

Answer 1

あなたのコンポーネントが疎結合（お互いを知らない）とあなたがそれらの間に何らかの相互作用を必要としているので、あなたのアプローチ（RxJSを使用する）でありますほとんどの対応する角度2へのアプローチ。

すべてが反応しています。フォームでも反応します。

EventEmitterは、再利用可能なコンポーネントからのイベントを出力しているときに、簡単であり、優れています。