Angular 2: Daten an Routen übergeben?

Question

Ich arbeite an diesem angular2-Projekt, in dem ich ROUTER_DIRECTIVES verwende, um von einer Komponente zur anderen zu navigieren.

Es gibt 2 Komponenten. h. PagesComponent & DesignerComponent.

Ich möchte von PagesComponent zu DesignerComponent navigieren.

Bis jetzt seine Routing korrekt, aber ich musste übergeben page Object so Designer kann diese Seite Objekt in sich laden.

Ich habe versucht, RouteParams, aber es ruft Seite Objekt undefined.

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

Im html, ich tue folgendes:

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

Im DesignerComponent Konstruktor Ich habe getan,

unter mein Code die folgenden:

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

Bis jetzt seine Routing korrekt zu Designer, aber wenn ich versuche, auf page Objekt in Designer zugreifen, dann zeigt es undefined. Irgendwelche Lösungen?

Answer 1

Sie können Objekte nicht mit Hilfe von Router-Parametern übergeben, nur Strings, da sie in der URL reflektiert werden müssen. Es wäre wahrscheinlich ein besserer Ansatz, einen gemeinsam genutzten Dienst zu verwenden, um Daten ohnehin zwischen gerouteten Komponenten weiterzuleiten.

Der alte Router erlaubt data zu übergeben, aber der neue Router (RC.1) noch nicht.

aktualisieren

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

Answer 2

Es in Winkel 2.1.0

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

auf die in something.module.ts wechselt wieder eingeführt zu erhalten Daten oder Parameter in der Edit-Komponente

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

Sie können dies tun:

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

In dieser oben Route mag ich Daten über einen pipeexamples Pfad zu PowerBoosterComponent senden.So, jetzt kann ich diese Daten in PowerBoosterComponent wie folgt erhalten:

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

So können Sie die Daten von this.route.snapshot.data['name'] erhalten.