时间戳

首页 > 解决方案 > 将数据注入Angular 8中动态创建的路由

angular - 将数据注入Angular 8中动态创建的路由

问题描述

我的 Angular 应用程序中有一项服务，它通过 GET 请求返回许多 GUID。然后，这些 GUID 用于使用以下方法动态生成许多不同的路由（其中每个License对象都将 GUID 保存在serialNumber变量中：

populateRoutes(licenses: License[]) {
    for (let license of licenses) {
      let route = {path: license.serialNumber, component: LicensePageComponent};
      this.router.config.push(route);
      this.links.push({text: license.serialNumber, path: license.serialNumber});
    }
  }

通过这样做，我的应用程序然后使用 GUID 作为页面链接生成一个新网页，每个许可证对象一个。然后，我在下面的单独模板中生成指向这些页面的可点击链接。

<div class="row">
  <div class="col-6">
    <a routerLink="{{this.license.serialNumber}}">{{this.license.serialNumber}}</a>
  </div>
  <div class="col-2">
    <span>{{this.license.connected}}</span>
  </div>
  <div class="col-2">
    <span>{{this.license.neverConnected}}</span>
  </div>
  <div class="col-2">
    <span>{{this.license.neverConnected}}</span>
  </div>
</div>

但是，许可证对象包含我希望在动态创建的页面中显示的更多信息。由于这些页面是动态的，因此我无法@Input()将许可证对象传递给动态创建的组件。

我真正需要做的是能够访问用于从动态组件生成网页的 GUID，如果我可以访问 GUID，我可以使用另一个 GET 请求从 API 检索许可证数据。

但是我不确定如何从动态组件内部访问 GUID。使用 queryParams 指令是一种方法，但这意味着我的动态页面的链接会导致看起来像localhost:4200/5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3?guid=5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3由于重复的 GUID 而看起来很难看的东西。

从动态组件内部访问 GUID 的最佳做法是什么？

标签： angularangular-router

解决方案

您可以使用Routedata?: Data的属性将静态数据发送到 Route。

let route = {path: license.serialNumber, component: LicensePageComponent, data: {field1: license.someField /** etc.. */} };

然后您可以使用ActivatedRoutedata: Observable<Data>的属性访问传递的数据

推荐阅读