どのようにangle2の親同期通信にルータ - 出口を達成するには？

Question

私はダッシュボードのサイドバーのページでカテゴリリストコンポーネントリスト

@Component({ 
    selector: 'dashboard', 
    template: '<category-list></category-list> 
       <header-top></header-top> 
       <router-outlet></router-outlet>' 
}) 

export class Dashboard{ 
    constructor() { 
    } 
} 

以下のすべてのカテゴリのように見えるのダッシュボードコンポーネントを持っている、と「/ダッシュボード」のベースルーティングは最初のすべてのリストをロードしますrouter-outlet（編集オプションもありますが、ここで編集する必要があります）、ルーターアウトレットの子と親の兄弟との通信に最適な方法は何ですか？

カテゴリリストのコンポーネントは、ルータのコンセント内部の私の子コンポーネントが

@Component({ 
    selector: 'category-list-edit', 
    template: '' 
}) 

export class DashboardCategoryList{ 
    constructor() { 
    } 
} 

のように見えます

@Component({ 
    selector: 'category-list', 
    template: "all category list" 
}) 

export class DashboardCategoryList{ 
    constructor() { 
    } 
} 

カテゴリリスト編集で編集がカテゴリ一覧に反映されるべきです、どのようにこれを達成することができますか？

Answer 1

アプリケーション全体で同じインスタンスが利用できるように、ルートコンポーネントからサービスを注入することができます。そのサービスでイベントがあり、category-listからそのEventEmitterに加入すると、いくつかの編集がそうのように行われたときcategory-list-editからイベントを発する：（HTTP [ユーザー]をクリックし選択したコンポーネントとの角度2つの動的なタブ]の

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

@Injectable() 
export class CategoryService { 
    categoryListEdited: EventEmitter<any> = new EventEmitter<any>(); 
    constructor() {} 
} 

@Component({ 
    selector: 'category-list-edit', 
    template: '' 
}) 
export class DashboardCategoryListEdit{ 
    constructor(private categoryService: CategoryService) { 
    } 

    edit(){ 
     //edits made here 
     this.categoryService.categoryListEdited.emit({}); 
    } 
} 

@Component({ 
    selector: 'category-list', 
    template: "all category list" 
}) 
export class DashboardCategoryList{ 
    constructor(private categoryService: CategoryService) { 
     this.categoryService.categoryListEdited.subscribe(data => { 
      console.log("something was changed in category-list-edit"); 
     }); 
    } 
}