角度2:将数据传递给路由？
我正在处理这个angular2项目，在这个项目中我使用ROUTER_DIRECTIVES从一个组件导航到另一个组件。
有两个组件。即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
}到目前为止，它正确地路由到designer，但当我试图在designer中访问page对象时，它会显示undefined。有什么解决方案吗？
回答 4
Stack Overflow用户
发布于 2016-05-11 17:07:55
您不能使用路由器参数传递对象，只能使用字符串传递，因为它需要反映在URL中。无论如何，使用共享服务在路由的组件之间传递数据可能是更好的方法。
旧的路由器允许通过data，但新的(RC.1)路由器还不允许。
更新
RC.4 How do I pass data in Angular 2 components while using Routing?中重新引入了data
Stack Overflow用户
发布于 2016-11-29 16:43:24
在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'];
}
}Stack Overflow用户
发布于 2017-02-02 15:55:11
您可以这样做：
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 {}在上面的路由中，我想通过管道示例路径将数据发送到PowerBoosterComponent.So，现在我可以接收PowerBoosterComponent格式的数据，如下所示：
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']);
}
}这样你就可以通过this.route.snapshot.data['name']获取数据了。
https://stackoverflow.com/questions/37157838
复制相似问题