कोणीय 2 - पृष्ठ पर एक अन्य घटक का एक घटक ट्रिगर रीफ्रेश करें

Question

मेरे पास एक घटक घटक है कि तत्वों की एक सूची प्रदर्शित करता है। यह सूची ngOnInit के दौरान inited है।

मेरे पास एक और घटक घटक बी नियंत्रण प्रदान करता है जो घटक में दिखाए गए तत्वों की सूची को प्रभावित कर सकता है। E.G. एक तत्व जोड़ा जा सकता है।

मुझे पर एक घटक की आवश्यकता है घटक की पुनरावृत्ति ट्रिगर करें।

क्या किसी के पास कोई विचार है?

---

विवरण

एक कि "savedSearchs"

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

बी की सूची से पता चलता एक मेनू के साथ एक 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 {}