web-dev-qa-db-fra.com

Angular Passage de données entre les routes

J'ai un petit problème avec les routes dans angular 4. Vous savez, quand j'essaie de passer des données d'un composant à un autre en utilisant navigate('root', data), je viens de recevoir [object Object],[object Object],[object Object].

Composant

export class FillRequestComponent implements OnInit {

  constructor(private route: Router, private dataRoute: ActivatedRoute) { }

  ngOnInit() {
    const key: Products = this.dataRoute.snapshot.params['objectProducts'];
    console.log(key);
  }

Interface

export interface Products {

  color: string,
  question: string,
  surname: string,
  icon: string,
  selected: boolean,
  transparent: boolean
}

Méthode d'envoi

const data = {
      category: this.optionSelected,
      objectProducts: this.optionSelected === 'CREDIT' ? this.productCreditList :
        this.productAccountsList
    };

    this.route.navigate(['/requests/fill', data]);
angulartypescriptangular-router
12
Kenry Sanchez

Lorsque vous passez un objet en tant que paramètre de route, il fait appeler toString sur cet objet et vous obtenez le résultat [object Object] de l'objet.

const obj = {};
console.log(obj.toString());

Si vous voulez passer un type complexe, vous devez le stringify vers un string et le passer comme string. Après l'avoir obtenu, vous devez à nouveau analyser un objet.

this.route.navigate(['/requests/fill', JSON.stringify(data)]);

et accéder plus tard

const key: Products = JSON.parse(this.dataRoute.snapshot.params['objectProducts']);
9
Suren Srapyan

Dans la version actuelle, cela est désormais disponible en @angular/router.

Angular 7.2 introduit l'état de l'itinéraire dans NavigationExtras, qui prend un objet littéral similaire à queryParams, etc.

L'état peut être réglé impérativement:

this.router.navigate(['example'], { 
  state: { example: 'data' } 
});

ou déclarativement:

<a routerLink="/example" [state]="{ example: 'data' }">
  Hello World
</a>

Et lisez un composant de niveau supérieur en utilisant:

this.router.getCurrentNavigation().extras.state;

ou dans les composants enfants en utilisant:

window.history.state

Ajout d'un exemple de travail utilisé sur StackBlitz

19
mtpultz

Vous ne pouvez pas passer la liste des données dans les paramètres

Vous devez donc convertir pour enchaîner la liste des objets, puis passer

navigate('root',   JSON.stringify(data))

Ensuite, effectuez l'analyse en obtenant ceci

const key: Products =JSON.parse(this.dataRoute.snapshot.params['objectProducts']);
3
Ramesh Rajendran