Question

我的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的最佳实践是什么？

Answer 1

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

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

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

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

1 个答案: