角2 - ページ上の別のコンポーネントの1つのコンポーネントトリガーリフレッシュ

Question

コンポーネントを持っていますコンポーネントAは要素のリストを表示します。このリストはngOnInitの間に引用されています。

私は別のコンポーネントを持っています。コンポーネントBは、ComponentAに表示されている要素のリストに影響を与えるコントロールを提供しています。例えば。要素を追加することができます。

私は、ComponentAのreinitをトリガーする方法が必要です。

誰かがアイデアを持っていますか？

---

詳細

"savedSearchs"

@Component({ 
    selector: 'header-bar', 
    templateUrl: 'app/headerBar/headerBar.html' 
}) 
export class HeaderBarComponent implements OnInit{ 
    ... 
    ngOnInit() { 
    // init list of savedSearches 
    ... 
    } 
} 

Bのリストを示してメニューをHeaderBarは、検索結果を保存する可能性を持つSearchComponentです

@Component({ 
    selector: 'search', 
    templateUrl: 'app/search/search.html' 
}) 
export class SearchComponent implements OnInit { 
    ... 
} 

Answer 1

あなたはコンポーネントを提供し、それを他のコンポーネントのngOnInitを呼び出す必要があるコンポーネントのコンストラクタ内に挿入する必要があります。

Plunkerデモ：https://plnkr.co/edit/M0d65wHjfg4KfwaQ5mPM?p=preview

//our root app component 
import {Component, NgModule, VERSION, OnInit} from '@angular/core' 
import {BrowserModule} from '@angular/platform-browser' 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     <comp-one></comp-one> 
     <comp-two></comp-two> 
    </div> 
    `, 
}) 
export class App { 
    name:string; 
    constructor() { 
    this.name = `Angular! v${VERSION.full}` 
    } 
} 

// ComponentOne with ngOnInit 

@Component({ 
    selector: 'comp-one', 
    template: `<h2>ComponentOne</h2>`, 
}) 
export class ComponentOne implements OnInit { 

    ngOnInit(): void { 
    alert("ComponentOne ngOnInit Called") 
    } 

} 

// Added provider of ComponentOne here and injected inside constructor the on button click call ngOnInit of ComponentOne from this component 
@Component({ 
    providers:[ComponentOne], 
    selector: 'comp-two', 
    template: ` Component Two: <button (click)="callMe()">Call Init of ComponentOne</button>`, 
}) 
export class ComponentTwo implements OnInit { 

    constructor(private comp: ComponentOne) { 
    this.name = `Angular! v${VERSION.full}` 
    } 
    public callMe(compName: any): void { 
    this.comp.ngOnInit(); 
    } 


} 
@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, ComponentOne, ComponentTwo ], 
    bootstrap: [ App ] 
}) 
export class AppModule {}