Question

我想通过routeparams将对象发送到另一个使用angular 5的页面，但它不起作用。

看一下我在下面写的代码：

<button mat-raised-button [routerLink]="['./view-class-timing-set',newObject]">New</button>

对象的TS代码：

newObject = {
 id: 123
}

模块代码：

{
path: 'ng2/ClassTimingSet',
component: ClassTimingSetComponent,

children: [
  { path: '', component: NewClassTimingSetComponent},
  { path: 'view-class-timing-set/:newClassTimingObj', component: ViewClassTimingSetComponent}
]

}，

TS CODE在页面路由后显示对象：

 ngOnInit() {
this.route.params.subscribe(
  params =>{
    console.log('THis is the object that I got');
    console.log(params);
  }

)

}

然而，页面没有被路由它说：

 Cannot match any routes. URL Segment: 'ng2/ClassTimingSet/view-class-timing-set;id=123'

Answer 1

I suggest you use queryParams instead. This is not a valid object in your url, and passing objects as usual url params is generally not a good idea. Just make your URL

{ path: 'view-class-timing-set', component: ViewClassTimingSetComponent}

(we do not need to indicate that a route can have query parameters, those are usually arbitrary)

Then in your component:

this.route.queryParams.subscribe(
  params => {
      console.log('THis is the object that I got');
       console.log(params);
  }

And visit the url like this: ng2/ClassTimingSet/view-class-timing-set?id=123&key1=value1&key2=value2

如何通过routeparams以角度5发送对象

1 个答案: