角2：経路にデータを渡すか？

Question

私はROUTER_DIRECTIVESを使って、あるコンポーネントから他のコンポーネントに移動するこのangular2プロジェクトに取り組んでいます。

2つのコンポーネントがあります。すなわちPagesComponent & DesignerComponentです。

PagesComponentからDesignerComponentに移動したいと考えています。

これまでのところ正しくルーティングされていましたが、デザイナーがそのページオブジェクトをロードできるように、pageオブジェクトを渡す必要がありました。

私はRouteParamsを使ってみましたが、その取得ページオブジェクトはundefinedでした。以下

が私のコードです：私が行っているDesignerComponentコンストラクタで

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

：HTMLで

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

pages.component.ts、私は、次のやっています以下：

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

これまで設計者に正しくルーティングされていましたが、デザイナーのpageオブジェクトにアクセスしようとしたときに、undefinedと表示されました。 すべてのソリューション？

Answer 1

ルータのパラメータを使用してオブジェクトを渡すことはできません。文字列のみをURLに反映する必要があるため、オブジェクトを渡すことはできません。いずれにしても、共有されたサービスを使用して、ルーティングされたコンポーネント間でデータをやりとりする方がよいでしょう。

古いルータはdataを渡すことができますが、新しい（RC.1）ルータはまだ通過しません。

更新

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

Answer 2

に再導入されました。これは、取得するには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 { } 

では2.1.0角度

に変更編集コンポーネント内のデータまたはパラメータ

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

をこの上の経路では、私はPowerBoosterComponentへpipeexamplesパスを介してデータを送信したいです。ですから、this.route.snapshot.data['name']してデータを取得することができ

パワーブースター-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']); 
    } 
} 

：だから今、私はこのようなPowerBoosterComponentでこのデータを受信することができます。