Question

我试图将数据（对象）从一个组件发送到另一个组件，但是我得到的结果为空。

这是我的代码

路由模块

{ path: 'booking/details', component: DetailsComponent, data: { title: extract('Details'), dataTransfer: '' } },

发送组件

this.router.navigate(['/booking/details', this.caseData]);

this.caseData看起来像这样

{
  "getAllInfo": {
    "ticket": {
      "internalNum": "12345",
      "comp": "11"
    },
    "caseInfo": {
      "masVolgnommer": "1",
      "masMaand": "1",
      "masJaar": "2010"
    }
  }
}

接收组件

this.caseData = this.route
 .data
 .subscribe(v => console.log(v.dataTransfer));

Answer 1

您的路由中不需要数据属性-不添加数据就可以将数据作为json绑定并读取它{ path: 'booking/details', component: DetailsComponent }，这可以在路由时传递数据-而路由声明中的data属性用于传递每次导航时的数据

每次尝试导航booking/details时，您都会获得数据{title: "Details", dataTransfer: ""}来读取此数据，您可以在构造函数中插入ActivatedRouteSnapshot并读为

this.activatedRouteSnapshot.data["title"]，它将返回详细信息

如果您要将数据传递到另一个组件，只需将数据作为Json传递

this.router.navigate(['/booking/details', { caseData : this.caseData }]);

最后，您可以按照上述相同的方式读取数据-this.activatedRouteSnapshot.data["caseData"]

希望这行得通-祝您编程愉快！

Answer 2

在订阅方法中设置caseData

this.route
 .data
 .subscribe(v => {
   this.caseData = v;
   console.log(this.caseData) 
});

在Angular路由器中动态传递数据

2 个答案: