如何在延迟加载的模块中提供服务，并将该服务的范围仅限于延迟加载的模块及其组件? [英] How do I provide a service in a lazy-loaded module and have that service scoped to just the lazy-loaded module and its components?

问题描述

在 angular docs FAQ 部分，它指出，与启动时加载的模块的提供者不同，延迟加载模块的提供者是模块范围的." 链接

In the angular docs FAQ section it states, "Unlike providers of the modules loaded at launch, providers of lazy-loaded modules are module-scoped." link

'module-scoped'在此仅表示模块还是扩展为包括属于该模块的所有组件?

Does 'module-scoped' here mean just the module or does it extend to include all components belonging to that module?

我问的原因是因为我有一个延迟加载的模块，其中包含 2 个属于它的组件.我在模块中注册了一个服务，但由于某种原因，每个组件都获得了该服务的不同实例.

The reason I ask is because I have a lazy-loaded module with 2 components that belong to it. I register a service in the module but for some reason each component is getting a different instance of that service.

为了在我的延迟加载模块中提供 LazyModuleService 并将该服务的范围仅限于延迟加载模块及其组件，我需要更改什么?请包括所需的任何其他文件.我试图举一个通用的例子来帮助任何可能发现这个问题的人.

What do I need to change in order to provide LazyModuleService in my lazy-loaded module and have that service scoped to just the lazy-loaded module and it's components? Please include any additional files needed. I've tried to make a generic example to help anyone else who might find this question.

延迟加载模块:

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

推荐答案

延迟加载的工作原理:

经过深入调查，问题似乎与延迟加载的实现方式有关.

After some deep investigation, it seems as though the problem is related to how lazy loading is implemented.

在您的情况下，您的延迟加载模块实际上路由到其中的 2 个不同组件 - 这两个组件都直接公开为 Router.forChild 路由.但是，结果是，当您导航到每个组件时，延迟加载模块提供程序的一个单独实例被添加到每个组件中.

In your case, your lazy loaded module actually had routing to 2 different components within it - both of those components were directly exposed as Router.forChild routes. But, as a result, when you navigated to each component, a separate instance of your lazy loaded module's providers were added to each component.

由于您实际上希望延迟加载模块中的所有组件共享其提供的服务的相同实例，因此您需要创建一个根"组件，然后让您的两个组件成为该根组件的子组件.

Since you actually wanted all of the components in the lazy loaded module to share the same instance of their provided services, you need to create a single 'root' component and then have your two components be children of that root component.

似乎在延迟加载时，模块中的提供程序将被添加到模块根部组件的注入器中.由于您有两个根组件"，它们每个都有单独的服务实例.

It seems as though when lazy loading, the providers in your module will be added to the injector of the component at the root of your module. Since you have two 'root components', they each got separate instances of the services.

解决方案是创建一个根组件，其注入器将接收延迟加载的服务，然后可以由任何子组件共享.

The solution was to create a single root component whose injector will receive the lazy loaded services, which can then be shared by any child components.

这篇关于如何在延迟加载的模块中提供服务，并将该服务的范围仅限于延迟加载的模块及其组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！