Question

子模块的服务可以与Angular中的父模块或兄弟模块共享吗？如果是这样，怎么样？

App Module
\ Common Module
  \ Core Module
    \ Authentication Service
    \ Event Handler Service
    \ Logger Service
  \ Data Service
\ Login Module
\ Dashboard Module

在上面的结构中，我想在 Core 模块等中声明身份验证，EventHandler和Logger服务。

我的目标是让我的服务在登录和仪表板模块中能够使用我在Core中创建的所有服务。我不想要在App，Login或Dashboard（提供商等）中重新声明所有这些服务。

我刚刚看了几门课程，他们都强调在 App Module的提供商数组中注册服务。尽管他们创建了嵌套模块，但他们从不提及上面的场景。

我所谈论的课程是：

Deborah Kurata的

Angular: Getting Started
Angular CLI John Papa的Angular : First Look John Papa的Boostrap Select

Answer 1

你有没有参加过“Angular Modules”课程的模块？我在这里介绍一下：

添加到providers数组的任何服务提供程序都在应用程序的根目录。因此可以注入该服务进入应用程序中的任何类。

这个例子：

比如说我们有一个名为ProductModule的功能模块。我们增加 ProductService到此模块的providers数组。首先一眼，我们可能会认为我们将ProductService封装成了 ProductModule。但事实并非如此。任何服务提供商添加到providers数组是在根目录下注册的应用程序，可用于任何类，甚至是其他类中的类功能模块。

以上内容是否也适用于您的场景？

然后这个：

如“服务和依赖注入”课程模块中所述，应该只有一个服务实例应用程序范围的单例。所以服务不应该包括在内任何要共享的模块的providers数组。相反，请考虑为服务构建Core模块并导入它一次在AppModule中。这将有助于确保服务只注册了一次。

如果这没有用，请告诉我，我会在下一次更新课程时进一步澄清这一点。

以下是一个示例核心模块：

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

import { DataService } from './data.service';
import { MessageService } from './message.service';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [],
  providers: [
    DataService,
    MessageService
  ]
})
export class CoreModule { }

我在这里注册我的DataService和MessageService。

然后像这样拉入Core模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './home/welcome.component';
import { PageNotFoundComponent } from './home/page-not-found.component';

import { AppRoutingModule } from './app-routing.module';

/* Feature Modules */
import { UserModule } from './user/user.module';
import { MessageModule } from './messages/message.module';
import { CoreModule } from './core/core.module';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    PageNotFoundComponent
  ],
  imports: [
    BrowserModule,
    HttpClientModule,
    UserModule,
    MessageModule,
    AppRoutingModule,
    CoreModule
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

现在，CoreModule中注册的服务可供整个应用程序中的每个组件，服务或其他类使用。

您可以使用以下服务：

import { Component, OnInit } from '@angular/core';

import { MessageService } from '../core/message.service';

@Component({
  selector: 'pm-menu',
  templateUrl: './menu.component.html'
})
export class MenuComponent implements OnInit {
  get displayMessages(): boolean {
    return this.messageService.displayMessages;
  }

  constructor(private messageService: MessageService) { }
 // ...

}

要在代码文件中使用任何，您需要为该内容添加import语句。因此，您仍然需要在服务中添加import语句，然后才能在需要它们的任何组件/类/管道/服务/等中使用它们。

Answer 2

了解如果您不使用延迟加载的模块，模块之间没有层次结构，这一点非常重要。所有模块和相应的服务都合并到单个模块工厂中，然后用于创建全局注入器。

使用延迟加载的模块，您可以获得层次结构，但子模块的服务可以从父模块访问服务。

我的目标是让我的登录和仪表板模块服务能够使用我在Core
中创建的所有服务

因此，如果您的Core模块被急切加载，模块中声明的每个服务都将在整个应用程序中可用。

文章Avoiding common confusions with modules in Angular深入解释了这个主题。

共享嵌套Angular 2/4服务

2 个答案: