web-dev-qa-db-fra.com

Angular 2 - Un composant déclenche l'actualisation d'un autre composant sur la page

J'ai un composant ComponentA qui affiche une liste d'éléments. Cette liste est désactivée pendant ngOnInit.

J'ai un autre composant ComponentB fournissant des contrôles qui pourraient influencer la liste des éléments affichés dans ComponentA. PAR EXEMPLE. un élément peut être ajouté.

J'ai besoin d'un moyen pour déclencher une réinitialisation de ComponentA.

Quelqu'un a-t-il une idée?

Détails

A est un HeaderBar avec un menu qui affiche la liste des "Recherches enregistrées"

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

B est un SearchComponent avec la possibilité de sauvegarder les recherches

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

Vous devez fournir un composant et l'injecter dans le constructeur du composant où vous devez appeler ngOnInit d'un autre composant comme je l'ai fait.

Démo 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 {}
10
Rohan Fating