ルーター（ルーターコンセント）をAngular2で実装した 'Master-detail'を実装

Question

私はAngular2ルーターを使ってマスターディテール画面を実装しています。 私はそのテンプレートにリソースのリスト（ul/liフォーマット済み）を定義するコンポーネントを持っています：マスターパート。リスト内の各リソースは、「routerLink」バインディングによってクリック可能です。

同じテンプレートでは、私はルータのアウトレットを定義しました。アイデアは：リスト（ul/li）のリソースの1つをクリックすると、Angular2はルーターのアウトレットのポイントに編集可能なフォームを表示またはレンダリングする必要があります。私はデータを変更し、保存ボタンを押すことができます。 （詳細部分）

このリソースが更新（保存）されると、リソースのリストにも表示されるデータが変更されている可能性があるため、リソースのリスト（ul/li）も更新します。リソース表示名として）。

Angular2はディテールコンポーネントを管理しているので、私はhtmlテンプレートでコンポーネントを宣言していません。しかし、ディテール・コンポーネントを宣言していないため、イベント（変更イベントなど）に反応するフックはありません。つまり、フォームが正常に変更されたら、私は「変更イベント」を発行します。このようなイベントに基づいて、マスターはリソースのリスト（ul/li）をリフレッシュすることによって自身を更新できるように、 'Master part'にハンドラを実装できます。

ポイント：アプリにAngular2ルータ機能が導入されているため、マスターコンポーネントとディテールコンポーネントの関係が失われました。

質問：このパターンを解決する方法はありますか？

Answer 1

あり方はまた、あなたが、以下

import { Component , Output, EventEmitter} from '@angular/core'; 

@Component({ 
    selector: 'my-app', 
    template: `Angular Route 
    <hr /> 
    <a routerLink="/child1" >Child 1</a> 
    <a routerLink="/child2" >Child 2</a> 
    <hr /> 
    Inside Parent component 
    <br /> 
    <br /> 
    Subscription from child : {{result | json}} 
    <hr /> 
    <div> Child Component</div> 
    <br /> 
    <router-outlet 
    (activate)='onActivate($event)' 
    (deactivate)='onDeactivate($event)'></router-outlet> 
    ` 
}) 
export class AppComponent { 
    result: any = {}; 

    constructor(){ 
    } 

    childSubscription: any; 

    onActivate($event){ 
    if(!!$event['parentNotifier']){ 
     this.childSubscription = $event['parentNotifier'].subscribe(res => { 
      this.result = res; 
     }); 
    } 
    } 

    onDeactivate($event){ 
    if(!!this.childSubscription){ 
     this.childSubscription.unsubscribe(); 
    } 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `I am a child 
    <button (click)='clickMe()' >Click me to notify parent</button> 
    ` 
}) 
export class ChildComponent1 { 
    @Output() parentNotifier:EventEmitter<any> = new EventEmitter<any>(); 

    clickMe(){ 
    this.parentNotifier.next('I am coming from child 1!!'); 
    } 
} 

@Component({ 
    selector: 'my-app', 
    template: `I am a child 
    <button (click)='clickMe()' >Click me to notify parent</button> 
    ` 
}) 
export class ChildComponent2 { 
    @Output() parentNotifier:EventEmitter<any> = new EventEmitter<any>(); 

    clickMe(){ 
    this.parentNotifier.next('I am coming from child 2!!'); 
    } 
} 

を試してみてください。しかし、イベントの名前は何とか私が使用している上記のサンプルのように親が知られている必要がある気づくことができ、使用することをComponent communication via a service

ですそれは直接parentNotifierです。

ここにはPlunkerがあります！

これが役立ちますように！