Question

通过路由传递数据但无法重新启动

来自另一个组件（传递数据的来源）

this._router.navigate(["/tsafety/checklist-checks", truckdetails:this.regForm.value}]);

现在在具有清单检查组件的组件中（我发送数据的地方）

constructor(){

this.sub = this.route.params
  .subscribe(params => {
    this.truckdetails = params["truckdetails"];
    console.log(params["truckdetails"]);
  })
}

以上控制台显示

[object Object]

如何在控制台中显示对象

时读取上述参数数据

更新路线文件

 {path:'checklist-checks', component:TruckYardChecklistComponent},

Answer 1

您可以使用以下语句使用javascript将对象写入控制台。

console.log(JSON.stringify(params["truckdetails"]));

当您检查时，这将在浏览器控制台中打印json格式字符串。

Answer 2

this.regForm.value 的结果是一个json对象，其中包含已定义的字段及其各自的值。

console.log的结果是正确的，因为路径参数中分配给“truckdetails”的值是 this.regForm.value 对象的.toString（）值。

如果您想传递表单的所有数据，请将整个对象作为可选参数传递给

this._router.navigate(["/tsafety/checklist-checks", this.regForm.value]);

Answer 3

实际上代码中存在小的修正，我认为它会起作用：

this._router.navigate(["/tsafety/checklist-checks", this.regForm.value]);

然后在路由器文件中执行类似这样的操作

{path:'checklist-checks/:truckdetails', component:TruckYardChecklistComponent},

现在，如果您在this.regForm.value

中获得价值，那么您的代码应该可行

Answer 4

我认为你错过了通过路线中的参数

替换您的一行代码

{path:'checklist-checks', component:TruckYardChecklistComponent},

按照以下行

{ path: 'checklist-checks/:truckdetails', component: ComponentTwo }

请详细了解路线参数到here。

Demo

希望这会对你有所帮助!!

Angular2读取解析数据

4 个答案: