Angular router: как передать данные в модуль ленивой загрузки?

Вы можете пройти по родительским маршрутам с помощью activateRoute.pathFromRoot и получить данные от ближайшего предка, у которого они есть. Что-то вроде этого вроде работает:

  ngOnInit(): void {
    let idx = this.activatedRoute.pathFromRoot.length - 1;
    while(this.sharedData == null && idx > 0){
      this.sub = this.activatedRoute.pathFromRoot[idx].data.subscribe(subData => {

        if(subData.id)
          this.sharedData = subData;

        console.log('shared data', this.sharedData);
      });
      idx--;
    }
  }

https://plnkr.co/edit/K5Rb1ZvTvSQNM6tOLeFp

Думаю, я могу понять, о чем спрашивается.

Проблема

Вот график маршрутизации предоставленного плункера @smartmouse.

- home
  - shop
  - contact
    - map
  - about

В конфигурации маршрута home настроен объект data. Прямые дочерние маршруты могут получить доступ к этому объекту данных. Проблема в том, что непрямой дочерний элемент map хочет получить доступ к объекту data, но, очевидно, не может.

И мы можем знать, что @smartmouse хочет продвинуть это еще дальше - вложенные непрямые дочерние маршруты могут получать доступ к данным от предка.

Почему не может?

См. Плункер, который я модифицировал. https://plnkr.co/edit/FA7mGmspUXHhU8YvgDpT

Как видите, я определяю дополнительный дочерний компонент DefaultComponent для contact. Он показывает, что это прямой дочерний элемент по умолчанию маршрута contact, который можно интерпретировать как прямой дочерний элемент вышестоящего маршрута home. Итак, он может получить доступ к объекту data.

Решение

Посмотрите еще раз на предоставленный мной плунжер.

ПРИМЕЧАНИЕ. Я использую пакеты Angular версии 4.3.0.

Подход # 1 - параметры запроса

Я определяю некоторые параметры запроса в home.component.ts для маршрута contact. Вы можете увидеть, как им пользоваться.

Плюсы:

• вы можете получить доступ к параметрам запроса на любом уровне маршрутов.
• хорошо работает с модулями lazyload

Минусы:

• вы не можете определить параметры запроса в конфигурации маршрута.

  Но вы можете использовать некоторые перехватчики жизненного цикла маршрута, чтобы определить их для целевых маршрутов-предков

Подход №2 - сервис

Определите службу обмена данными на верхнем уровне приложения, играющего как Singleton Pattern. Кроме того, используйте некоторые утилиты, чтобы предотвратить его запуск дважды. Затем вы можете поместить в него некоторые данные и получить их где угодно.

Плюсы:

• глобальный виден через DI;
• хорошо работает с модулями lazyload

Минусы:

• вы не можете обновить данные в конфигурации маршрута.
• вам нужно определить данные в другом месте. Если вы не можете контролировать его источник, это может быть проблемой.

Подход # 3 - решение маршрута

Кто-то может узнать, что я также определил resolve образец кода в плункере. Чтобы показать, что он имеет такое же поведение, как data в конфигурации маршрута, за исключением того, что на самом деле он предназначен для динамического извлечения данных.

https://vsavkin.com/angular-router-understanding-router-state-7b5b95a12eab#5400
Свойство data используется для передачи фиксированного объекта активированному маршруту. Он не меняется на протяжении всего срока службы приложения. Свойство разрешения используется для динамических данных.

Возьмем, к примеру, plunkr @ smartmouse.

У нас есть data, определенный в конфигурации «домашнего» маршрута. Мы можем определить преобразователь данных в ContactModule для маршрута контакта по умолчанию и проксировать данные, передаваемые из вышестоящего маршрута. Затем все его прямые дочерние маршруты могут получить доступ к объекту данных разрешенный.

Плюсы:

• хорошо работает с любым уровнем вложенных маршрутов
• хорошо работает с модулями lazyload

Минусы:

• Возможно, вам придется объявить это свойство resolve в каждом родительском маршруте, дочерние маршруты которого хотят получить доступ к этим данным. Это грязная работа.

На данный момент не существует идеального и универсального решения с обычным использованием Angular. Кто-то должен взвесить все за и против и выбрать подходящий.

Почему бы вам не использовать сервис для обмена данными между модулями или любыми компонентами. Вы можете импортировать эту службу у основного поставщика модуля и, следовательно, использовать ее во всех других модулях (модуль отложенной загрузки) и совместно использовать данные.

Служба может иметь функции для установки и получения значений, и, следовательно, вы можете использовать эти функции в службах для получения необходимых данных.