Angular 2:向路由传递数据?
Angular 2: Passing Data to Routes?
我正在处理这个 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
中重新引入
它在 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 {}
在上述路线中,我想通过管道示例路径将数据发送到 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']
获取数据。
1.设置您的路线以接受数据
{
path: 'some-route',
loadChildren:
() => import(
'./some-component/some-component.module'
).then(
m => m.SomeComponentModule
),
data: {
key: 'value',
...
},
}
2。导航至路线:
来自HTML:
<a [routerLink]=['/some-component', { key: 'value', ... }> ... </a>
或来自打字稿:
import {Router} from '@angular/router';
...
this.router.navigate(
[
'/some-component',
{
key: 'value',
...
}
]
);
3。从路线获取数据
import {ActivatedRoute} from '@angular/router';
...
this.value = this.route.snapshot.params['key'];
我正在处理这个 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
它在 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 {}
在上述路线中,我想通过管道示例路径将数据发送到 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']
获取数据。
1.设置您的路线以接受数据
{
path: 'some-route',
loadChildren:
() => import(
'./some-component/some-component.module'
).then(
m => m.SomeComponentModule
),
data: {
key: 'value',
...
},
}
2。导航至路线:
来自HTML:
<a [routerLink]=['/some-component', { key: 'value', ... }> ... </a>
或来自打字稿:
import {Router} from '@angular/router';
...
this.router.navigate(
[
'/some-component',
{
key: 'value',
...
}
]
);
3。从路线获取数据
import {ActivatedRoute} from '@angular/router';
...
this.value = this.route.snapshot.params['key'];