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

Question

我的 Angular 应用程序中有一项服务可以通过 GET 请求 returns 一些 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 作为页面的 link 生成一个新网页，每个许可证对象一个。然后，我在下面的单独模板中为这些页面生成可点击的 link。

<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 指令是一种方法，但这意味着我的动态页面的 link 会导致看起来像 localhost:4200/5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3?guid=5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3，由于重复的 GUID 而看起来很难看。

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

Answer 1

您可以使用 data?: Data 属性或 Route 将静态数据发送到路由。

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

然后您可以使用 data: Observable<Data> 属性或 ActivatedRoute

访问传递的数据

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

Inject data to dynamically created routes in Angular 8

angular

angular-router