Angulaire 2: Passer des données aux itinéraires?

Je travaille sur ce projet angular2 dans lequel j'utilise ROUTER_DIRECTIVES pour naviguer d'un composant à l'autre.

Il y a 2 composants. C'est-à-dire PagesComponent & DesignerComponent .

Je souhaite naviguer de PagesComponent à DesignerComponent.

Jusqu'à présent, il était correctement acheminé mais j'avais besoin de passer l'objet de la page afin que le concepteur puisse charger cet objet de page en soi.

J'ai essayé d'utiliser RouteParams Mais l'objet de la page n'est pas undefined .

Ci-dessous est mon code:

Pages.component.ts

 import {Component, OnInit ,Input} from 'angular2/core'; import { GlobalObjectsService} from './../../shared/services/global/global.objects.service'; import { ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router'; import { DesignerComponent } from './../../designer/designer.component'; import {RouteParams} from 'angular2/router'; @Component({ selector: 'pages', directives:[ROUTER_DIRECTIVES,], templateUrl: 'app/project-manager/pages/pages.component.html' }) @RouteConfig([ { path: '/',name: 'Designer',component: DesignerComponent } ]) export class PagesComponent implements OnInit { @Input() pages:any; public selectedWorkspace:any; constructor(private globalObjectsService:GlobalObjectsService) { this.selectedWorkspace=this.globalObjectsService.selectedWorkspace; } ngOnInit() { } }

Dans le html, je suis en train de suivre:

 <scrollable height="300" class="list-group" style="overflow-y: auto; width: auto; height: 200px;" *ngFor="#page of pages"> {{page.name}}<a [routerLink]="['Designer',{page: page}]" title="Page Designer"><i class="fa fa-edit"></i></a> </scrollable>

Dans le constructeur DesignerComponent, j'ai fait ce qui suit:

 constructor(params: RouteParams) { this.page = params.get('page'); console.log(this.page);//undefined }

Jusqu'à présent, le routage est correct pour le concepteur, mais lorsque j'essaie d'accéder à l'objet de page dans le concepteur, il montre qu'il est undefined . Des solutions?

Vous ne pouvez pas passer des objets en utilisant des params de routeur, uniquement des chaînes, car il doit être reflété dans l'URL. Ce serait probablement une meilleure approche pour utiliser un service partagé pour transmettre les données entre les composants routés de toute façon.

L'ancien routeur permet de transmettre des data mais le nouveau routeur ( RC.1 ) ne fonctionne pas encore.

Mettre à jour

data été réintroduites dans RC.4 Comment puis-je transmettre des données dans les composants Angular 2 lors de l'utilisation du routage?

Il change en 2.1.0 angulaire

Dans quelque chose.module.ts

 import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { BlogComponent } from './blog.component'; import { AddComponent } from './add/add.component'; import { EditComponent } from './edit/edit.component'; import { RouterModule } from '@angular/router'; import { MaterialModule } from '@angular/material'; import { FormsModule } from '@angular/forms'; const routes = [ { path: '', component: BlogComponent }, { path: 'add', component: AddComponent }, { path: 'edit/:id', component: EditComponent, data: { type: 'edit' } } ]; @NgModule({ imports: [ CommonModule, RouterModule.forChild(routes), MaterialModule.forRoot(), FormsModule ], declarations: [BlogComponent, EditComponent, AddComponent] }) export class BlogModule { }

Pour obtenir les données ou les paramètres dans le composant d'édition

 import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute, Params, Data } from '@angular/router'; @Component({ selector: 'app-edit', templateUrl: './edit.component.html', styleUrls: ['./edit.component.css'] }) export class EditComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router ) { } ngOnInit() { this.route.snapshot.params['id']; this.route.snapshot.data['type']; } }

Tu peux le faire:

App-routing-modules.ts:

 import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PowerBoosterComponent } from './component/power-booster.component'; export const routes: Routes = [ { path: 'pipeexamples',component: PowerBoosterComponent, data:{ name:'shubham' } }, ]; @NgModule({ imports: [ RouterModule.forRoot(routes) ], exports: [ RouterModule ] }) export class AppRoutingModule {}

Dans cette route ci-dessus, je souhaite envoyer des données via un chemin d'accès pipeexamples à PowerBoosterComponent. Maintenant, je peux recevoir ces données dans PowerBoosterComponent comme ceci:

Power-booster-component.ts

 import { Component, OnInit } from '@angular/core'; import { Router, ActivatedRoute, Params, Data } from '@angular/router'; @Component({ selector: 'power-booster', template: ` <h2>Power Booster</h2>` }) export class PowerBoosterComponent implements OnInit { constructor( private route: ActivatedRoute, private router: Router ) { } ngOnInit() { //this.route.snapshot.data['name'] console.log("Data via params: ",this.route.snapshot.data['name']); } }

Ainsi, vous pouvez obtenir les données par this.route.snapshot.data['name'] .

Vous pouvez passer l'objet en tant que chaîne à l'aide de: pageParam = JSON.stringify(page) , puis obtenir l'objet en utilisant page = JSON.parse(pageParam)