共享嵌套的Angular 2/4服務

Angular中的父模塊或同級模塊可以共享子模塊的服務嗎？如果是這樣，怎麼樣？共享嵌套的Angular 2/4服務

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

在上面的結構，我想在我核心模塊申報驗證，事件處理程序，並記錄器服務等

我的目標是爲我登錄和Dashboard服務模塊能夠使用我在Core中創建的所有服務。我不要要重新申報所有這些服務的應用程序，登錄或儀表板（提供商等）。

我剛看完幾門課程，他們都強調在應用模塊的提供商陣列中註冊服務。儘管他們創建了嵌套模塊，但他們從不提及上述場景。

我談論的課程有：

Angular: Getting Started德博拉倉田
Angular CLI通過John Papa
Angular : First Look通過John Papa

來源

2017-09-07 G. Deward

你使用模塊的延遲加載還是全部急切加載？ –

我寧願懶惰地加載它們，但我的大腦如此油炸以至於我並不在乎。 –

您是否在課程中學習過「角模塊」模塊？我在這裏覆蓋：

任何添加到providers數組的服務提供者都在應用程序的根目錄中註冊。因此，該服務可用於在應用程序中將注入任何類。

而且這個例子：

說，例如，我們有一個名爲ProductModule一個功能模塊。我們將ProductService添加到本模塊的providers數組中。起初，我們可能會認爲我們已經將ProductService封裝爲的ProductModule。但事實並非如此。添加到提供者陣列的任何服務提供商已在應用程序的根目錄中註冊，並且可用於任何類，即使在其他功能模塊中也可提供。

上述內容是否也涵蓋了您的方案？

然後將此：

爲「服務和依賴注入」課程模塊中討論，應該只有這是一個應用範圍的單服務的一個實例。因此，任何應該共享的模塊都不應該包含在提供程序數組中。相反，考慮爲服務構建一個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這裏。

然後拉動核心模塊是這樣的：

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語句爲那件事代碼文件中使用任何。所以你仍然需要添加一個導入語句你的服務，然後才能在任何需要它們的組件/類/管道/服務等中使用它們。

來源

2017-09-07 15:36:42 DeborahK

我有。 Yaaaay！（愛那）這是問題。我不想在根應用程序中註冊服務。感覺不對。如果我有一個「共享」或「普通」模塊，並有15-20個通用服務，那麼應該有一種方式來說「讓所有這些服務都可用」......而不必回到App模塊。這是AngularJS的工作方式。我很難接受一個改進的版本會讓它變得更加困難。 –

我不確定我瞭解它是如何更難？在Core模塊中註冊服務。然後將App模塊引入Core模塊。（Angular應用程序的所有內容都必須以某種方式綁定到App模塊）。我會更新我的答案以包含此內容。 – DeborahK

這可能只是缺少的鏈接[對我]。通過將CoreModule添加到App模塊的imports數組中，Core中包含的各個服務（例如LoggerService，AuthService等）可以自動用於其他模塊和服務（即WelcomeComponent，AppRoutingModule，MessageModule等）。它是否正確？ CoreModule中的15-20個服務不必導入任何其他地方或添加到另一個模塊的「提供程序」數組中？ –

明白，如果你不使用懶加載的模塊是非常重要的模塊之間沒有層次結構。所有模塊和相應的服務都合併到單個模塊工廠中，然後用於創建全局注入器。

使用延遲加載的模塊可以獲得層次結構，但子模塊的服務可以從父模塊訪問服務。

我的目標是爲我登錄服務和儀表板模塊能夠使用所有我的核心

因此創建的服務，如果你的核心模塊，即時加載，每一項服務中聲明這些模塊將在整個應用程序中可用。

文章Avoiding common confusions with modules in Angular深入解釋了這個話題。

來源

2017-09-07 14:41:41

共享嵌套的Angular 2/4服務

回答

相關問題