Как я могу предоставить службу в модуле с отложенной загрузкой, и чтобы эта служба была ограничена только модулем с отложенной загрузкой и его компонентами?

В разделе часто задаваемых вопросов по angular docs говорится: "В отличие от поставщиков модулей, загружаемых при запуске, поставщики модулей с отложенной загрузкой имеют область действия модулей". ссылка на сайт

Означает ли здесь термин "модуль" только модуль, или он распространяется на все компоненты, принадлежащие этому модулю?

Причина, по которой я спрашиваю, заключается в том, что у меня есть модуль с отложенной загрузкой и двумя принадлежащими ему компонентами. Я регистрирую сервис в модуле, но по какой-то причине каждый компонент получает свой экземпляр этого сервиса.

Что мне нужно изменить, чтобы обеспечить LazyModuleService в моем модуле с отложенной загрузкой, и чтобы эта служба работала только с модулем с отложенной загрузкой и его компонентами? Пожалуйста, включите любые дополнительные необходимые файлы. Я попытался сделать общий пример, чтобы помочь любому, кто может найти этот вопрос.

Ленивый модуль:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { Component1 } from './component1.component';
import { Component2 } from './component2.component';
import { LazyModuleService } from './lazy-module.service';

@NgModule({
  imports: [
    CommonModule,
  ],
  declarations: [
    Component1,
    Component2,
  ],
})

export class LazyLoadedModule { }
Источник

3 ответа

Решение

Как работает отложенная загрузка:

После некоторого глубокого изучения кажется, что проблема связана с тем, как реализована отложенная загрузка.

В вашем случае ваш ленивый загруженный модуль фактически имел маршрутизацию на 2 разных компонента - оба эти компонента были напрямую представлены как маршруты Router.forChild. Но в результате, когда вы переходили к каждому компоненту, к каждому компоненту добавлялся отдельный экземпляр поставщиков вашего лениво загруженного модуля.

Так как вы на самом деле хотели, чтобы все компоненты в загруженном модуле с ленивым доступом совместно использовали один и тот же экземпляр предоставляемых ими служб, вам нужно создать один "корневой" компонент, а затем сделать ваши два компонента дочерними по отношению к этому корневому компоненту.

Кажется, что при ленивой загрузке провайдеры в вашем модуле будут добавлены в инжектор компонента в корне вашего модуля. Поскольку у вас есть два "корневых компонента", каждый из них получил отдельные экземпляры сервисов.

Решение состояло в том, чтобы создать один корневой компонент, инжектор которого получит лениво загруженные сервисы, которые затем могут быть использованы любыми дочерними компонентами.

Источник

Отличное встроенное решение, предоставляемое Angular 6. Если вы используете Angular 6+ (узнайте ваш package.json), вы можете предоставлять услуги для всего приложения другим способом.

Вместо того, чтобы добавлять класс обслуживания к массиву provider [] в AppModule, вы можете установить следующую конфигурацию в @Injectable():

@Injectable({providedIn: 'root'})
export class MyService { ... }

Это точно так же, как:

export class MyService { ... }

а также

import { MyService } from './path/to/my.service';

@NgModule({
    ...
    providers: [MyService]
})
export class MyService { ... }

Использование этого нового синтаксиса совершенно необязательно, традиционный синтаксис (с использованием провайдеров []) будет по-прежнему работать. "Новый синтаксис" действительно предлагает одно преимущество: сервисы могут быть загружены Angular (скрытно), а избыточный код может быть удален автоматически. Это может привести к повышению производительности и скорости загрузки - хотя в целом это действительно важно для более крупных сервисов и приложений.

Источник: Удемий

Источник

Просто добавьте ваш LazyModuleService в качестве провайдера в ваш LazyLoadedModule. Вы сможете использовать его только в компонентах этого модуля.

Источник
Другие вопросы по тегам