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
}
これまでのところ、デザイナーへのルーティングは正しく行われていますが、デザイナーのpage
オブジェクトにアクセスしようとすると、undefined
と表示されてしまいます。
何か解決策はありますか?
ルーターのパラメータを使ってオブジェクトを渡すことはできませんが、文字列はURLに反映させる必要があるため、文字列のみ渡すことができます。いずれにしても、ルーティングされたコンポーネント間のデータの受け渡しには、共有サービスを使用する方が良いでしょう。
古いルーターではdata
を渡すことができますが、新しい(RC.1
)ルーターではまだできません。
**アップデート
dataは
RC.4` で再び導入されました。https://stackoverflow.com/questions/36835123/how-do-i-pass-data-in-angular-2-components-while-using-routing
angular 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'];
}
}
することができます。
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 {}
*上記のルートでは、pipeexamplesのパス経由でPowerBoosterComponentにデータを送信したいと思います。
PowerBoosterComponent.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']
でデータを取得することができます。