angular - 共享嵌套的 Angular 2/4 服务

Question

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

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

在上面的结构中，我想在我的Core 模块等中声明Authentication、EventHandler 和Logger 服务。

我的目标是让我的服务在登录和仪表板模块中能够使用我在 Core 中创建的所有服务。我不想在应用程序、登录或仪表板(提供商等)中重新声明所有这些服务。

我刚刚看完几个类(class)，他们都强调在App Module's providers 数组中注册服务。即使他们创建了嵌套模块，他们也从未提及上述场景。

我说的类(class)是:

Angular: Getting Started德博拉仓田
Angular CLI通过 John Papa
Angular : First Look通过 John Papa

Answer 1

你学习到我的“Angular 模块”类(class)中的模块了吗？我在这里介绍:

Any service provider added to the providers array is registered at the root of the application. So the service is available to be injected into any class in the application.

还有这个例子:

Say for example we have a feature module called ProductModule. We add the ProductService to the providers array of this module. At first glance, we may think that we have encapsulated the ProductService into the ProductModule. But that is not the case. Any service provider added to the providers array is registered at the root of the application and is available to any class, even classes in other feature modules.

以上是否也涵盖了您的场景？

然后是:

As discussed in the "Services and Dependency Injection" course module, there should only be one instance of a service that is an application-wide singleton. So a service should not be included in the providers array for any module that is meant to be shared. Instead, consider building a Core module for services and importing it once in the AppModule. This will help ensure that the services are only registered one time.

如果这没有帮助，请告诉我，我会在我的类(class)的下一次更新中进一步澄清这一点。

这是一个示例核心模块:

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。

然后像这样拉入核心模块:

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) { }
 // ...

}

要在代码文件中使用任何东西，您需要为那个东西添加导入语句。因此，在您可以在任何需要它们的组件/类/管道/服务/等中使用它们之前，您仍然需要为您的服务添加导入语句。