Inject data to dynamically created routes in Angular 8

Question

I have a service within my Angular app that returns a number of GUIDs via GET request. These GUIDs are then used to dynamically generate a number of different routes using the following method (where each License object holds the GUID inside the serialNumber variable:

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

From doing this my app then generates a new webpage using the GUID as the link to the page, one per each license object. I am then generating clickable links to these pages in a separate template, below.

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

However the license object contains more information that I wish to be displayed inside the dynamically created pages. Since these pages are dynamic there is no way for me to use @Input() to pass the license object to the dynamically created component.

What I really need to do is be able to access the GUID used to generate the webpage from the dynamic component, if I can access the GUID I can use another GET request to retrieve the license data from the API.

However I'm not sure how I am able to access the GUID from inside the dynamic component. Using the queryParams directive is one way, but this would mean that the link for my dynamic pages would result in looking something like localhost:4200/5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3?guid=5c7cbf1b-e7fc-49c4-b47a-a39f5cc83ed3 which looks ugly due to the repeated GUID.

What would be the best practice to access the GUID from inside the dynamic component?

Answer 1

you can use data?: Data property of Route to send static data to a Route.

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

then you can access passed data with data: Observable<Data> property of ActivatedRoute