Angolare 2: passaggio dei dati alle rotte?

Question

Sto lavorando a questo progetto angular2 in cui sto usando ROUTER_DIRECTIVES per navigare da un componente all'altro.

Ci sono 2 componenti. Ad esempio PagesComponent & DesignerComponent.

Desidero passare da PagesComponent a DesignerComponent.

Finora il suo instradamento correttamente ma ho dovuto passare page Oggetto in modo che il progettista possa caricare l'oggetto di pagina in sé.

Ho provato a utilizzare RouteParams ma ha ottenuto l'oggetto pagina undefined.

sotto è il mio codice:

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() { } 
} 

nel codice HTML, che sto facendo seguente:

<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> 

Nel costruttore DesignerComponent che ho fatto il seguente:

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

Finora il suo instradamento correttamente per progettista, ma quando sto cercando di accedere a page oggetto nel designer, quindi la sua mostra undefined. Qualche soluzione?

Answer 1

Non è possibile passare oggetti utilizzando parametri del router, solo stringhe perché è necessario che si riflettano nell'URL. Sarebbe probabilmente un approccio migliore per utilizzare un servizio condiviso per passare comunque i dati tra componenti instradati.

Il vecchio router consente di passare data ma il nuovo router (RC.1) non è ancora installato.

Aggiornamento

data stato reintrodotto in RC.4How do I pass data in Angular 2 components while using Routing?

Answer 2

Si cambia in angolare 2.1.0

In something.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 { } 

Per ottenere il dati o parametri nel componente di modifica

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']; 

    } 
} 

Answer 3

Si può fare questo:

app-instradamento-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 {} 

In questo percorso di cui sopra, voglio inviare i dati tramite un percorso pipeexamples a PowerBoosterComponent.Così ora posso ricevere questi dati in PowerBoosterComponent come questo:

potenza 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']); 
    } 
} 

Così si può ottenere i dati dal this.route.snapshot.data['name'].