web-dev-qa-db-fra.com

Comment accéder aux propriétés du composant parent à partir d'un composant de route enfant dans Angular?

version: (angulaire 5)

Je suis nouveau à Angular et je suis coincé là-bas. Je sais comment partager des données entre le parent et le composant enfant simplement en injectant [parentData] = "var" dans le sélecteur d'enfant <>.

Mais lors de l'utilisation du routage; J'ai seulement une sortie de routeur et je ne peux pas y associer [parentData] car cela génère une erreur.

Quelle est la manière la meilleure et la plus simple d'accéder aux propriétés parentales à partir d'un itinéraire enfant?

Le projet est sur stackblitz ici .

J'ai besoin d'afficher les produits (du composant parent) à l'intérieur du composant enfant.

javascriptangularroutingparent-child
7
shireef khatab

Oui, c'est assez simple, lorsque vous souhaitez passer à un composant qui se trouve dans router-outlet vous devez utiliser services, en fait ce composant n'existe pas dans le modèle avant d'aller sur le bon chemin, donc les liaisons habituelles ne fonctionnent pas ici.

Donc, la meilleure façon de contourner ce problème est de créer un service simple

Dans le service

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';

@Injectable()
export class DataTransferService {

  private products= new BehaviorSubject<any>([]);
  cast= this.products.asObservable();

  sendAnything(data) {
    this.products.next(data);
  }

}

puis injectez votre service dans les deux constructeurs de votre composant parent et enfant

Dans le composant parent

 constructor(private dataTransfer: DataTransferService){}

puis créez une méthode

 shareData(data){
    this.dataTransfer.sendAnything(data) // to send something
}

et appelez-le depuis parent.component.html avec

(click)="shareData(data)" // data is the parent data that you want to share

Dans le composant enfant

à l'intérieur de la méthode ngOnInit, ajoutez:

 ngOnInit() {
   this.dataTransfer.products.subscribe(res=> this.var = res) // var is the property that you want to assign the data to it.
 }

pour obtenir les données et travailler avec.
plus d'informations et d'exemples Vous pouvez trouver dans doc

6
Kraken

D'une part, vous ne pouvez pas transmettre une entrée à la balise router-outlet puisque le composant ajouté par le routeur sera frère de la balise et ne la remplacera pas.

D'autre part, lorsque votre application Angular devient de plus en plus complexe, transmettre la même entrée des composants parents aux composants enfants ne sera plus la bonne façon de faire les choses ..

Dans votre cas, la meilleure façon de traiter la variable produits est de la déclarer comme sujet de comportement dans le service produits:

   prodcuts:Subject<IProducts[]> = new BehaviorSubject<IProducts[]>([]);

et dans le composant parent, vous envoyez les données reçues:

ngOnInit() { 
    this._productsService.getProducts()
        .subscribe(
          data => {this.products = data;
          this._productsService.prodcuts.next(data);
          },
          error => this.errMsg = error
        );    
}

Enfin, dans le client enfant, vous devez vous abonner au sujet de comportement déclaré dans le service:

export class ChildComponent implements OnInit {
public products = [];

constructor(private _productsService: ProductsService ) { 
}

ngOnInit() {
    this._productsService.prodcuts
    .subscribe(
      data => {
       {this.products = data;
      }
    );    
  } 
}
4
m.bouali