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

Question

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

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>

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

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

但是，我不确定如何能够从动态组件中访问GUID。使用queryParams指令是一种方式，但这将意味着我的动态页面的链接将导致类似于localhost:4200/5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3?guid=5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3的东西，因为重复的GUID看起来很难看。

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

Answer 1

可以使用data?: Data属性路由向路由发送静态数据。

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

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