Question

我有一个由Component和一堆子组件组成的模块。还有一个专门用于此模块的服务。

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

当我将带有提供程序的Service注入组件时，可以，但是我想在模块级别设置提供程序。

模块

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提供程序！

有没有办法做到这一点？我想念什么吗？

Answer 1

好吧，这很有趣。

您可以在组件级别上注入服务（因此您可以将服务直接注入每个子组件中，但这不仅麻烦，而且每个组件都将具有其新的服务实例）

但是，如果您将我锁在地牢中并说要以任何方式做到这一点，这就是我会做的。我会延迟加载该模块。

说明：

我们有两个模块（AppModule和LazyModule）提供相同的服务。
由于我们的第二个模块很懒，因此Angular不知道它的存在。。这意味着LazyModule的provider数组中列出的任何服务都不可用，因为根注入器尚不了解LazyModule...。当我们激活路线时，将加载惰性模块并创建新的进样器。想象一棵注入器树，在其顶部是根注入器，对于每个惰性模块，将创建新的子注入器。
来自根注射器的所有服务都将添加到子注射器。如果根注入器和子注入器提供相同的服务，则Angular首选子注入器中的服务实例。因此，每个惰性组件都将获得服务的本地实例，而不是根应用程序注入器中的实例。
因此，懒惰者将使用自己的另一个引用，而应用程序的其余部分将使用它。

Answer 2

我不会把任何人都锁在地牢中；-)！

最后，我决定遵循第一个解决方案，并将服务Injectable for Root放入。不想做复杂的事情来避免某些事情不会/永远不会发生（即：将该服务用于另一个组件而不是专门用于该服务的组件）。

最初，我真正想做的是将服务仅限定于它的模块范围，并将其提供给模块的子组件。

为Root放置服务允许我共享服务，我将假定该服务不应被该应用程序的其他部分使用。

无论如何，我仍然不知道为什么设置提供程序将服务加载到模块中在我的上下文中不起作用。

将服务注入模块的所有组件

2 个答案: