Question

我有两条路线。一个是＆＃34;父母＆＃34; -route和一个＆＃34;孩子＆＃34; -route。始终首先加载父路由，如果用户想要导航到子路由，则加载子路由的内容。

两条路线都需要一个特殊的对象＆＃34; myObject＆＃34;。父路由始终具有此对象。现在我想传递＆＃34; myObject＆＃34;到了孩子的路线。

我不能使用route.params，因为myObject是动态的和一个对象（不只是一个简单的字符串或数字）
如果父路由存储myObject并且子路由从中检索myObject，我不想使用共享DataService。这似乎有点矫枉过正，因为myObject已经存在，我只想将myObject传递给子路径。

有没有可能解决这个问题？也许在Guards的帮助下？我更喜欢这样的简单解决方案：

this.router.navigate('my/url/to/navigate', myObject);

Answer 1

目前没有优雅的方法可以做到这一点。

如果您真的不想要服务，可以以json格式传递数据。

示例（此处，json将出现在网址中）：

this.router.navigate(['/child-route'], {
    queryParams: {
    'myObject': JSON.stringify(myObject)
  }});

在您的子组件中（ngOnInit中）：

this.sub = this.route
  .queryParams
  .subscribe(t => {
    console.log(t['myObject']);
  });

现在，一个限制是通过序列化到JSON，您丢失了类信息。

在typescript中，很难从普通的js对象中获取类实例。我找到this library, class-transformer，这似乎有效（但我不知道表演）。因此，要在您的子组件中找回 ts实例：

import {plainToClass} from "class-transformer/index";


this.sub = this.route
  .queryParams
  .subscribe(t => {
    let o = <MyObject>JSON.parse(t['myObject']);
    this.myObject = <MyObject>plainToClass(MyObject, o);
  });

现在，this.myObject的类型为MyObject。

Answer 2

您可以将简单属性传递到导航调用的参数中，如下所示： -

this._router.navigate(['/route-location', {name: 'test'}]);

在路线上的组件中，您可以订阅参数并获取值。

    this.route.params.subscribe((p) => {
        let params: any = p;
        console.log(params.name);
    });

如果您想传递更多数据等，那么服务就是您的选择。

Angular2：在没有共享服务的路由之间传递数据

2 个答案: