Question

首先：它不是重复的。链接的复制问题的答案使用了我之后没有的服务。

我有一个路由表：

const routes: Routes = [
  ...
  { path: 'comp1', loadChildren: './module1/module1.module.ts#Module1Module' },
  ...
  ];

在主要组件的主管（app.component.ts）中，我导航到：

constructor(private router: Router){
  router.navigate(['/comp1',{aaa:222,bbb:{ccc:3}}])
}

但是 - 它被序列化为URL。

https://angular-iqfnre-router.stackblitz.io/comp1;aaa=222;bbb=%5Bobject%20Object%5D

现在 - 我不希望它出现在网址中。（更不用说价值无效）

此外 - 懒惰模块中的远程路由是：

const routes: Routes = [
  {
    path: '', component: Comp1Component,

    children: [{
      path: 'acomp', component: AComponent,
    }]

  }
];

所以它不支持参数（我不是在谈论参数而是复杂的数据）。

我不想改变路线表。

问题：

如何将任意（复杂）数据传递到路线 - 如何在路由后读取它？

Stackblitz

NB

我不想使用服务。我确定还有另一个选项来加载带有数据的路由。提到的docs NavigationExtras但我认为它仍在使用网址。（请 - 没有字符串化）。

Answer 1

对于这种要求，我建议使用共享服务。通过它，您可以传递所需的数据类型，而不会在路由上产生任何额外开销。

Answer 2

Havn有机会对此进行全面测试，但似乎在一条简单的路线上工作目前，它将字符串化为不是最好的对象。

在全局组件/服务中添加

let routeData = null;
    this.router.events
          .filter((event) => (event instanceof ActivationStart || event instanceof ActivationEnd)).subscribe((event) => {

            if (event instanceof ActivationStart) {
              if(event.snapshot.params) {
                let routeDataStr:string = event.snapshot.params.routeData;

                if (routeDataStr) {
                  routeData = JSON.parse(routeDataStr);
                  if (event.snapshot.url[0]) {
                    this.router.navigate([event.snapshot.url[0].path]);
                  }
                }
              }
            } else if (event instanceof ActivationEnd) {

              let actEnd:ActivationEnd = event;

              if (routeData) {
                actEnd.snapshot.data = actEnd.snapshot.data == null ? {} : actEnd.snapshot.data;
                actEnd.snapshot.data.routeData = routeData
              }
            }
          })

然后触发导航使用

let dataob:DataObject = {
  blah: 123
}
this.router.navigate(['/comp1', {routeData: JSON.stringify(dataob)}]);

在您刚导航到的组件上，您现在可以访问activeRoute上的数据

  constructor(private route: ActivatedRoute, private router: Router) { }

  ngOnInit() {
    console.log(this.route.snapshot.data.routeData)
  }

Answer 3

请参阅https://yakovfain.com/2015/11/11/angular-2-passing-data-to-routes中的“将静态数据传递到路线”部分：

将静态数据传递给路径

虽然大多数时候父组件都会将数据传递给   他们的孩子，Angular还提供了一种传递额外的机制   路由配置时的数据到组件。对于   例如，除了产品ID之类的动态数据，我们可能需要通过   指示应用程序是否在生产环境中运行的标志   不。这可以通过使用您的路线的数据属性来完成   组态。例如，我们的产品详细信息的路线可以是   配置如下：
{path: 'product/:id', component: ProductDetailComponentParam ,
                      data: [{isProd: true}]}
data属性可以包含任意字符串键值的数组对。当路由器将打开ProductDetailComponentParam数据时 value将位于的data属性中 ActivatedRoute.snapshot：
export class ProductDetailComponentParam {
  productID: string;
  isProdEnvironment: string;

  constructor(route: ActivatedRoute) {
    this.productID = route.snapshot.params['id'];

    this.isProdEnvironment = route.snapshot.data[0]['isProd'];
  }
}
通过数据属性将数据传递到路由不是替代方法在路径属性中配置参数，如 path：'product /：id' 但是当你需要在一段时间内传递一些数据时可以派上用场配置阶段，例如它是一个生产或QA环境。

如何将任意（非参数化）数据传递给Angular中的路由？

3 个答案:

将静态数据传递给路径