Угловой 2: Передача данных в маршруты?

Question

Я работаю над этим проектом angular2, в котором я использую ROUTER_DIRECTIVES для перехода от одного компонента к другому.

Есть 2 компонента. т.е. PagesComponent & DesignerComponent.

Я хочу перейти от PagesComponent к DesignerComponent.

До сих пор его маршрутизация правильно, но мне нужно было пройти page Объект, так что дизайнер может загрузить этот объект страницы сам по себе.

Я пробовал использовать RouteParams Но его получение объекта страницы 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() { } 
} 

В HTML, я делаю следующее:

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

В конструкторе DesignerComponent я сделал следующие:

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

До сих пор его правильная маршрутизация дизайнеру, но когда я пытаюсь получить доступ к объекту в дизайне, то его показ undefined. Любые решения?

Answer 1

Вы не можете передавать объекты с помощью параметров маршрутизатора, только строки, потому что это должно быть отражено в URL-адресе. Вероятно, это был бы лучший подход к использованию общей службы для передачи данных между маршрутизируемыми компонентами.

Старый маршрутизатор позволяет пройти data, но новый (RC.1) маршрутизатор еще не наступил.

Обновление

data был вновь введен в RC.4How do I pass data in Angular 2 components while using Routing?

Answer 2

Это изменяет в угловом 2.1.0

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

Для того, чтобы получить данных или параметров в компоненте редактирования

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

Вы можете сделать это:

приложение-маршрутизации 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 {} 

В этом выше пути, я хочу, чтобы отправить данные через канал pipeexamples к PowerBoosterComponent.Так что теперь я могу получить эти данные в PowerBoosterComponent так:

питания бустер-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']); 
    } 
} 

Таким образом, вы можете получить данные по this.route.snapshot.data['name'].