Javascript 如何将任意（非参数化）数据以角度传递给管线？

第一：这不是重复。链接的dup问题的答案使用了我不想要的服务

我有一个路由表：

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

在主组件的ctor（

app.component.ts

）中，我导航到：

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

但是-它被序列化为URL

现在-我不希望它出现在url中。（更不用说该值无效）

另外-惰性模块中的远程路由为：

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

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

  }
];

所以它不支持参数（我不是说参数，而是一个复杂的数据）

我不想更改路由表

问题：

如何将任意（复杂）数据传递到路由？一旦路由完成，如何读取

NB

我不想使用服务。我确信还有另一个选项可以加载带有数据的路由。上面提到的

NavigationExtras

，但我认为它仍然在使用URL。

---

（请不要严格限制）。

对于此类需求，我建议使用共享服务。这样，您就可以传递所需的数据类型，而不会在路由上造成任何额外开销

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

还没有机会完全测试这一点，但似乎是在一个简单的路线上进行的 虽然目前stringify不是最好的对象

在全局组件/服务中添加

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)
  }

---

我还没有机会完全测试这一点，但似乎在一个简单的路线上工作 虽然目前stringify不是最好的对象

在全局组件/服务中添加

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)
  }

请参阅中的“将静态数据传递到路由”部分：

向路由传递静态数据 而大多数情况下，父组件将向 他们的孩子，棱角分明，也提供了一种传递额外信息的机制 路由配置时发送到组件的数据。对于 例如，除了像产品ID这样的动态数据之外，我们可能还需要传递 指示应用程序是否在生产环境中运行的标志 不这可以通过使用路由的数据属性来完成 配置例如，我们的产品详细信息路线可以是 配置如下：

{path: 'product/:id', component: ProductDetailComponentParam ,
                      data: [{isProd: true}]}

data属性可以包含任意字符串键值的数组 对。路由器何时打开数据的ProductDetailComponentParam 值将位于的数据属性中 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'];
  }
}

通过data属性向路由传递数据不是路由的替代方法 将path属性中的参数配置为路径：“product/：id” 但是，当您需要在传输过程中向路由传递一些数据时，它会很方便 配置阶段，例如，是生产环境还是QA环境

请参阅中的“将静态数据传递到路由”部分：

向路由传递静态数据 而大多数情况下，父组件将向 他们的孩子，棱角分明，也提供了一种传递额外信息的机制 路由配置时发送到组件的数据。对于 例如，除了像产品ID这样的动态数据之外，我们可能还需要传递 指示应用程序是否在生产环境中运行的标志 不这可以通过使用路由的数据属性来完成 配置例如，我们的产品详细信息路线可以是 配置如下：

{path: 'product/:id', component: ProductDetailComponentParam ,
                      data: [{isProd: true}]}

data属性可以包含任意字符串键值的数组 对。路由器何时打开数据的ProductDetailComponentParam 值将位于的数据属性中 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'];
  }
}

通过data属性向路由传递数据不是路由的替代方法 将path属性中的参数配置为路径：“product/：id” 但是，当您需要在传输过程中向路由传递一些数据时，它会很方便 配置阶段，例如，是生产环境还是QA环境

---

是的，有了服务，我什么都能做。但我相信它是被支持的。另外，当我考虑这个问题时，如果我向服务传递一个值，这个值应该等待目标组件读取。当您从父级到子级使用服务的DI时，会在父级和子级上注入相同的实例，因此数据将立即可用。不知道你为什么说它需要等待。例如：Im在A中，想用额外的数据D转到B。所以在Im中做

。导航（[“B”]

。但在此之前，我必须用插槽S1调用数据D的服务。现在-导航到B后-B将必须读取（注入）服务和读取值S1。这并不复杂，但不像加载带有附加数据的路由那样简单（我相信这是可以做到的）.我理解你的想法，也明白你的意思。但我不确定你是否能做到，因为所有的导航附加功能基本上都是操作查询参数的方式。你没有让它变得简单：）是的，有了服务，我什么都能做。但我相信它是被支持的。另外，当我考虑这个问题时，如果我向服务传递一个值，这个值应该等待目标组件读取。当您从父级到子级使用服务的DI时，会在父级和子级上注入相同的实例，因此数据将立即可用。不知道你为什么说它需要等待。例如：我在A中，想用额外的数据D转到B。所以在A中，我正在做

。导航（[“B”]

。但在此之前，我必须用插槽S1调用一个数据为D的服务。现在-导航到B后-B将不得不读取（注入）服务并读取v