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

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

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

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

Что мне нужно изменить, чтобы предоставить 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 3
angular2-routing angular2-modules

3 ответа:

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

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

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

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

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

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

6

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

2

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

Вместо добавления класса обслуживания в массив providers[] в 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 (за кулисами), а избыточный код может быть удален автоматически. Это может привести к повышению производительности и скорости загрузки - хотя на самом деле это работает только для больших сервисов и приложений в целом.

Источник: Udemy

0