angular - 如何通过角度 5 中的 routeparams 发送对象

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

我建议你queryParams改用。这不是您 url 中的有效对象，并且像往常一样传递对象 url 参数通常不是一个好主意。只需制作您的网址

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

（我们不需要指出一个路由可以有查询参数，这些通常是任意的）

然后在您的组件中：

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

并像这样访问网址：ng2/ClassTimingSet/view-class-timing-set?id=123&key1=value1&key2=value2