Внедрить данные в динамически созданные маршруты в Angular 8

Question

В моем приложении Angular есть сервис, который возвращает количество GUID через GET-запрос.Эти 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

вы можете использовать data?: Data свойство Маршрут для отправки статических данных в маршрут.

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

тогда вы можете получить доступ к переданным данным с помощью data: Observable<Data> свойства ActivatedRoute