Açısal 2 - Bir bileşen, sayfadaki başka bir bileşenin yenilenmesini tetikliyor

Question

Bileşen bileşeninin öğesinin bir listesini öğelerinin bir listesini görüntülediğini. Bu liste ngOnInit sırasında başlatılmıştır.

ComponentA'da gösterilen öğeler listesini etkileyebilecek kontroller sağlayan başka bir bileşenim var BileşenB. ÖRNEĞİN. bir eleman eklenebilir.

için bir yol ihtiyacım var ComponentA bir yeniden başlatma.

Birisi bir fikri var mı?

---

Detaylar

A "savedSearchs"

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

B listesini gösteren bir menü ile HeaderBar aramaları kaydetmek imkanı ile bir SearchComponent olduğu

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

Answer 1

Bileşen sağlamanız ve yaptığım gibi başka bir bileşenin ngOnInit öğesini çağırmanız gereken bileşen kurucusunun içine enjekte etmeniz gerekir.

Plunker Demosu: 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 {}