Góc 2 - Một lần làm mới kích hoạt thành phần của một thành phần khác trên trang

Question

Tôi có thành phần ComponentA rằng hiển thị danh sách các thành phần. Danh sách này được inited trong ngOnInit.

Tôi có một thành phần khác ComponentB cung cấp các điều khiển có thể ảnh hưởng đến danh sách các thành phần được hiển thị trong ComponentA. VÍ DỤ. một phần tử có thể được thêm vào.

Tôi cần một cách để kích hoạt sự hoàn nguyên của ComponentA.

Có ai đó có ý tưởng không?

---

Chi tiết

Một là một HeaderBar với một menu hiển thị danh sách của "savedSearchs"

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

B là một SearchComponent với khả năng lưu các tìm kiếm

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

Answer 1

Bạn cần cung cấp thành phần, và tiêm nó bên trong hàm tạo của thành phần mà bạn cần gọi ngOnInit của thành phần khác như tôi đã làm.

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