Comment transmettre des données aux composants routés angulaires?

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

first.component.html

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

Mon objectif est d'atteindre:

Cliquez sur le bouton -> route 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 la collecte des mêmes données en fonction de l'interaction de l'utilisateur.

first.component.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, j'acheminais vers SecondComponent par

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

éventuellement passer les données par

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

considérant 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 suppose que je ne peux pas transmettre de données complexes (par exemple un objet comme property3) dans l'url;

2ÈME APPROCHE

Une alternative serait d'inclure SecondComponent comme directive dans FirstComponent.

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

Cependant, je veux router vers ce composant, ne pas l'inclure!

3ÈME APPROCHE

La solution la plus viable que je vois ici serait d'utiliser un service (par exemple FirstComponentService) pour

• stocker les données (_firstComponentService.storeData ()) sur routeWithData () dans FirstComponent
• récupérer les données (_firstComponentService.retrieveData ()) dans ngOnInit () dans SecondComponent

Bien que cette approche semble parfaitement viable, je me demande si c'est la façon la plus simple / la plus élégante d'atteindre l'objectif.

En général, je voudrais savoir si je manque d'autres approches potentielles pour transmettre les données entre les composants, en particulier avec le moins de code possible

mise à jour 4.0.0

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

original

Utiliser un service est la voie à suivre. Dans les paramètres d'itinéraire, vous ne devez transmettre que les données que vous souhaitez refléter dans la barre d'URL du navigateur.

Voir également https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service

Le routeur livré avec RC.4 réintroduit 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 également le Plunker sur https://github.com/angular/angular/issues/9757#issuecomment-229847781

Je pense que nous n'avons pas le genre de chose $ rootScope en angulaire 2 comme en angulaire 1.x. Nous pouvons utiliser angulaire 2 service / classe partagé pendant que dans ngOnDestroy passer les données au service et après le routage prendre les données du service dans la fonction ngOnInit :

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

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

Passer l'objet du composant de première page:

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

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

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

Voici un exemple: plunker

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

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

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

comme vous pouvez le voir dans ma définition des itinéraires, j'ai ajouté le /:idsupport aux données que je souhaite transmettre au composant via la navigation du routeur. Par conséquent, votre code ressemblera à

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

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

import { ActivatedRoute } from '@angular/router'

et ngOnInitc'est là que 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 lire plus dans cet article https://www.tektutorialshub.com/angular-passing-parameters-to-route/

Angular 7.2.0 a introduit une nouvelle façon de transmettre les données lors de la navigation entre les composants routés:

@Component({
  template: `<a (click)="navigateWithState()">Go</a>`,
})
export class AppComponent  {
  constructor(public router: Router) {}
  navigateWithState() {
    this.router.navigateByUrl('/123', { state: { hello: 'world' } });
  }
}

Ou:

@Component({
  selector: 'my-app',
  template: `
  <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>`,
})
export class AppComponent  {}

Pour lire l'état, vous pouvez accéder à la window.history.statepropriété une fois la navigation terminée:

export class PageComponent implements OnInit {
  state$: Observable<object>;

  constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }
}

Une personne super intelligente (tmburnell) qui n'est pas moi suggère de réécrire les données de l'itinéraire:

let route = this.router.config.find(r => r.path === '/path');
route.data = { entity: 'entity' };
this.router.navigateByUrl('/path');

Comme on le voit ici dans les commentaires.

J'espère que quelqu'un trouvera cela utile

Je cette l'autre approche pas bon pour cette question. Je pense que la meilleure approche est Query-Parameter par Routerangular qui a 2 voies:

Passer directement le paramètre de requête

Avec ce code , vous pouvez naviguer urlpar paramsvotre code html:

<a [routerLink]="['customer-service']" [queryParams]="{ serviceId: 99 }"></a>

Passage du paramètre de requête par Router

Vous devez injecter le routeur dans votre constructorcomme:

constructor(private router:Router){

}

Maintenant, utilisez cela comme:

goToPage(pageNum) {
    this.router.navigate(['/product-list'], { queryParams: { serviceId: serviceId} });
}

Maintenant, si vous voulez lire Routerdans un autre, Componentvous devez utiliser ActivatedRoutecomme:

constructor(private activateRouter:ActivatedRouter){

}

et subscribeque:

  ngOnInit() {
    this.sub = this.route
      .queryParams
      .subscribe(params => {
        // Defaults to 0 if no query param provided.
        this.page = +params['serviceId'] || 0;
      });
  }

Nous sommes en 2019 et de nombreuses réponses ici fonctionneraient, selon ce que vous voulez faire. Si vous voulez passer dans un état interne non visible dans l'URL (paramètres, requête), vous pouvez utiliser statedepuis 7.2 (comme je l'ai appris aujourd'hui :)).

Depuis le blog (crédits Tomasz Kula) - vous accédez à l'itinéraire ....

... de ts: this.router.navigateByUrl('/details', { state: { hello: 'world' } });

... à partir du modèle HTML: <a routerLink="/details" [state]="{ hello: 'world' }">Go</a>

Et pour le récupérer dans le composant cible:

constructor(public activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.state$ = this.activatedRoute.paramMap
      .pipe(map(() => window.history.state))
  }

Tard, mais j'espère que cela aide quelqu'un avec Angular récent.

Solution avec ActiveRoute (si vous voulez passer objet par route - utilisez JSON.stringfy / JSON.parse):

Préparez l'objet avant de l'envoyer:

export class AdminUserListComponent {

  users : User[];

  constructor( private router : Router) { }

  modifyUser(i) {

    let navigationExtras: NavigationExtras = {
      queryParams: {
          "user": JSON.stringify(this.users[i])
      }
    };

    this.router.navigate(["admin/user/edit"],  navigationExtras);
  }

}

Recevez votre objet dans le composant destination:

export class AdminUserEditComponent  {

  userWithRole: UserWithRole;      

  constructor( private route: ActivatedRoute) {}

  ngOnInit(): void {
    super.ngOnInit();

      this.route.queryParams.subscribe(params => {
        this.userWithRole.user = JSON.parse(params["user"]);
      });
  }

}

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 souhaitez utiliser dans le composant associé.

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
}

Passer en utilisant JSON

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

utiliser un service partagé pour stocker des données avec un index personnalisé. puis envoyez cet index personnalisé avec queryParam. cette approche est plus flexible .

// component-a : typeScript :
constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.DataCollector['someDataIndex'] = data;
}

// component-a : html :
<a routerLink="/target-page" 
   [queryParams]="{index: 'someDataIndex'}"></a>

.

// component-b : typeScript :
public data;

constructor( private DataCollector: DataCollectorService ) {}

ngOnInit() {
    this.route.queryParams.subscribe(
        (queryParams: Params) => {
            this.data = this.DataCollector[queryParams['index']];
        }
    );
}

dis que tu as

1. component1.ts
2. component1.html

et vous souhaitez transmettre des données à component2.ts .

• dans component1.ts est une variable avec des données dites

    //component1.ts
    item={name:"Nelson", bankAccount:"1 million dollars"}
  
    //component1.html
     //the line routerLink="/meter-readings/{{item.meterReadingId}}" has nothing to 
    //do with this , replace that with the url you are navigating to
    <a
      mat-button
      [queryParams]="{ params: item | json}"
      routerLink="/meter-readings/{{item.meterReadingId}}"
      routerLinkActive="router-link-active">
      View
    </a>
  
    //component2.ts
    import { ActivatedRoute} from "@angular/router";
    import 'rxjs/add/operator/filter';
  
    /*class name etc and class boiler plate */
    data:any //will hold our final object that we passed 
    constructor(
    private route: ActivatedRoute,
    ) {}
  
   ngOnInit() {
  
   this.route.queryParams
    .filter(params => params.reading)
    .subscribe(params => {
    console.log(params); // DATA WILL BE A JSON STRING- WE PARSE TO GET BACK OUR 
                         //OBJECT
  
    this.data = JSON.parse(params.item) ;
  
    console.log(this.data,'PASSED DATA'); //Gives {name:"Nelson", bankAccount:"1 
                                          //million dollars"}
     });
    }

Vous pouvez utiliser BehaviorSubject pour partager des données entre les composants routés. Un BehaviorSubject contient une valeur. Lorsqu'il est souscrit, il émet la valeur immédiatement. Un sujet n'a pas de valeur.

Dans le service.

@Injectable({
  providedIn: 'root'
})
export class CustomerReportService extends BaseService {
  reportFilter = new BehaviorSubject<ReportFilterVM>(null);
  constructor(private httpClient: HttpClient) { super(); }

  getCustomerBalanceDetails(reportFilter: ReportFilterVM): Observable<Array<CustomerBalanceDetailVM>> {
    return this.httpClient.post<Array<CustomerBalanceDetailVM>>(this.apiBaseURL + 'CustomerReport/CustomerBalanceDetail', reportFilter);
  }
}

Dans le composant, vous pouvez vous abonner à ce BehaviorSubject.

this.reportService.reportFilter.subscribe(f => {
      if (f) {
        this.reportFilter = f;
      }
    });

Remarque: le sujet ne fonctionnera pas ici, vous devez utiliser uniquement le sujet de comportement.