Comment transmettre des données aux composants routés d'Angular ?

Question

Dans l'un des modèles de mes routes Angular 2 ( FirstComponent ) J'ai un bouton

premier.composant.html

<div class="button" click="routeWithData()">Pass data and route</div>

Mon objectif est à réaliser :

Clic sur un bouton -> acheminement vers un autre composant tout en préservant les données et sans utiliser l'autre composant comme directive.

C'est ce que j'ai essayé...

1ÈRE APPROCHE

Dans la même vue, je stocke les mêmes données basées sur l'interaction de l'utilisateur.

premier.composant.ts

export class FirstComponent {
     constructor(private _router: Router) { }

     property1: number;
     property2: string;
     property3: TypeXY; // this a class, not a primitive type

    // here some class methods set the properties above

    // DOM events
    routeWithData(){
         // here route
    }
}

Normalement, je me dirigerais vers SecondComposant par

 this._router.navigate(['SecondComponent']);

en transmettant éventuellement les données par

 this._router.navigate(['SecondComponent', {p1: this.property1, p2: property2 }]);

alors que la définition du lien avec les paramètres serait

@RouteConfig([
      // ...
      { path: '/SecondComponent/:p1:p2', name: 'SecondComponent', component: SecondComponent} 
)]

Le problème avec cette approche est que je pense Je ne peux pas transmettre des données complexes (par exemple, un objet comme la propriété3) in-url ;

2IÈME APPROCHE

Une alternative serait d'inclure SecondComponent en tant que directive dans FirstComponent.

  <SecondComponent [p3]="property3"></SecondComponent>

Cependant, je veux itinéraire à ce composant, et non l'inclure !

3IÈME APPROCHE

La solution la plus viable que je vois ici serait d'utiliser une Service (par exemple, FirstComponentService) à l'adresse suivante

• magasin les données (_firstComponentService.storeData()) sur routeWithData() dans FirstComponent
• récupérer les données (_firstComponentService.retrieveData()) en ngOnInit() sur SecondComposant

Bien que cette approche semble parfaitement viable, je me demande si c'est le moyen le plus simple / le plus élégant d'atteindre l'objectif.

D'une manière générale, j'aimerais savoir si je manque d'autres approches potentielles pour transmettre les données entre les composants, notamment avec le moins de code possible

Answer 1

mise à jour 4.0.0

Voir la documentation d'Angular pour plus de détails https://angular.io/guide/router#fetch-data-before-navigating

original

L'utilisation d'un service est la meilleure solution. Dans les paramètres de la route, vous ne devez transmettre que les données que vous souhaitez voir apparaître dans la barre d'URL du navigateur.

Voir aussi https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#servicebidirectionnel

Le routeur livré avec la RC.4 réintroduit les éléments suivants data

constructor(private route: ActivatedRoute) {}

const routes: RouterConfig = [
  {path: '', redirectTo: '/heroes', pathMatch : 'full'},
  {path : 'heroes', component : HeroDetailComponent, data : {some_data : 'some value'}}
];

class HeroDetailComponent {
  ngOnInit() {
    this.sub = this.route
      .data
      .subscribe(v => console.log(v));
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

Voir aussi le Plunker à https://github.com/angular/angular/issues/9757#issuecomment-229847781

Answer 2

Je pense que puisque nous n'avons pas $rootScope Nous pouvons utiliser le service/la classe partagé(e) d'angular 2 alors qu'en angular 1.x. ngOnDestroy transmettre les données au service et, après le routage, récupérer les données du service dans la base de données. ngOnInit fonction :

Ici, j'utilise DataService pour partager l'objet héros :

import { Hero } from './hero';
export class DataService {
  public hero: Hero;
}

Passer l'objet du premier composant de la page :

 ngOnDestroy() {
    this.dataService.hero = this.hero; 
 }

Prenez l'objet du composant de la deuxième page :

 ngOnInit() {
    this.hero = this.dataService.hero; 
 }

Voici un exemple : plunker

Answer 3

<div class="button" click="routeWithData()">Pass data and route</div>

la façon la plus simple de le faire dans angular 6 ou d'autres versions, je l'espère, est de définir simplement votre chemin avec la quantité de données que vous voulez passer.

{path: 'detailView/:id', component: DetailedViewComponent}

comme vous pouvez le voir dans la définition de mes routes, j'ai ajouté l'élément /:id pour se tenir aux données que je veux transmettre au composant via la navigation par routeur. Par conséquent, votre code ressemblera à

<a class="btn btn-white-view" [routerLink]="[ '/detailView',list.id]">view</a>

afin de lire le id sur le composant, il suffit d'importer ActivatedRoute comme

import { ActivatedRoute } from '@angular/router'

et sur le ngOnInit est l'endroit où vous récupérez les données

ngOnInit() {
       this.sub = this.route.params.subscribe(params => {
        this.id = params['id'];
        });
        console.log(this.id);
      }

vous pouvez en savoir plus dans cet article https://www.tektutorialshub.com/angular-passing-parameters-to-route/

Answer 4

La troisième approche est le moyen le plus courant de partager des données entre les composants. Vous pouvez injecter le service d'élément que vous voulez utiliser dans le composant lié.

import { Injectable } from '@angular/core';
import { Predicate } from '../interfaces'

import * as _ from 'lodash';

@Injectable()
export class ItemsService {

    constructor() { }

    removeItemFromArray<T>(array: Array<T>, item: any) {
        _.remove(array, function (current) {
            //console.log(current);
            return JSON.stringify(current) === JSON.stringify(item);
        });
    }

    removeItems<T>(array: Array<T>, predicate: Predicate<T>) {
        _.remove(array, predicate);
    }

    setItem<T>(array: Array<T>, predicate: Predicate<T>, item: T) {
        var _oldItem = _.find(array, predicate);
        if(_oldItem){
            var index = _.indexOf(array, _oldItem);
            array.splice(index, 1, item);
        } else {
            array.push(item);
        }
    }

    addItemToStart<T>(array: Array<T>, item: any) {
        array.splice(0, 0, item);
    }

    getPropertyValues<T, R>(array: Array<T>, property : string) : R
    {
        var result = _.map(array, property);
        return <R><any>result;
    }

    getSerialized<T>(arg: any): T {
        return <T>JSON.parse(JSON.stringify(arg));
    }
}

export interface Predicate<T> {
    (item: T): boolean
}

Answer 5

Passer en utilisant JSON

  <a routerLink = "/link"
   [queryParams] = "{parameterName: objectToPass| json }">
         sample Link                   
  </a>