时间戳

首页 > 解决方案 > 将服务注入到模块的所有组件中

angular - 将服务注入到模块的所有组件中

问题描述

我有一个由一个组件和一堆子组件组成的模块。还有一个专门针对这个模块的服务。

我不确定是否了解满足我需求的注射机制。我想要做的是将服务注入所有子组件。

当我将带有提供程序的服务注入组件时，没关系，但我想在模块级别设置提供程序。

模块

import { NgModule } from '@angular/core';

import { ChangeUserComponent } from './change-user.component';
import { ChangeUserSidebarComponent } from './sidebar/sidebar.component';
import { ChangeUserUserListComponent } from './user-list/user-list.component';

import { ChangeUserService } from './change-user.service';

@NgModule({
    declarations: [
        ChangeUserComponent,
        ChangeUserUserListComponent,
        ChangeUserSidebarComponent
    ], 
    providers      : [
        ChangeUserService // <-- when i set that it's not working
    ],
    exports     : [
        ChangeUserComponent
    ]
})

export class ChangeUserModule
{
}

子组件

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ChangeUserService } from '../change-user.service';

@Component({
    selector   : 'change-user-sidebar',
    templateUrl: './sidebar.component.html',
    styleUrls  : ['./sidebar.component.scss'],
    //providers:  [ ChangeUserService ] // <-- with that the service is correctly injected
})
export class ChangeUserSidebarComponent
{

  public activeNode: any;

    constructor(
      private _changeUserService: ChangeUserService
    )
    {
    }
}

服务

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable()
export class ChangeUserService 
{
    constructor(
        private _http: HttpClient
    ){}
}

当我在组件级别设置 Provider 但我想在模块级别设置它时，服务被正确注入。

编辑：当我在组件级别设置关键字提供程序时：一切正常

何时在模块级别设置关键字提供程序：

错误：未捕获（承诺）：NullInjectorError：StaticInjectorError（AppModule）[ChangeUserSidebarComponent -> ChangeUserService]：StaticInjectorError（平台：核心）[ChangeUserSidebarComponent -> ChangeUserService]：NullInjectorError：没有ChangeUserService的提供者！

有没有办法做到这一点 ？我错过了什么吗？

标签： angulartypescript

解决方案

嗯，这很有趣。

在组件级别你可以有一个服务注入（所以你可以直接在每个子组件中注入服务，但这不仅麻烦，而且每个组件都会有它的新服务实例）

但是如果你把我锁在一个地牢里，并说无论如何都要这样做，这就是我会做的。我会懒加载那个模块。

解释：

  1. 我们有两个提供相同服务的模块（AppModule 和 LazyModule）。
  2. 由于我们的第二个模块是惰性的，Angular 不知道它的存在。.这意味着我们的 LazyModule 的 providers 数组中列出的任何服务都不可用，因为根注入器还不知道 LazyModule ...... 当我们激活路由时，惰性模块将被加载并创建新的注入器。想象一棵注入器树，顶部是根注入器，对于每个惰性模块，都会创建新的子注入器。
  3. 来自根注入器的所有服务都将添加到子注入器。如果根注入器和子注入器提供相同的服务，Angular 更喜欢来自子注入器的服务实例。所以每个惰性组件都会获取服务的本地实例，而不是根应用程序注入器中的实例。
  4. 所以 Lazy 将使用它自己的另一个引用，并且应用程序的其余部分将拥有它

推荐阅读