在Angular 2中提供核心单例服务模块

我尝试创建一些核心模块,就像在教程中除了一个细节,我想只提供服务.所以我的CoreModule应该像 – 单身服务提供商,因为我不想在AppModule中提供大量服务,就像应用版本< = RC4一样.我试着做那些东西,但它不起作用.
我做错了吗？谢谢你的帮助.

import {
  ModuleWithProviders,NgModule,Optional,SkipSelf }       from '@angular/core';

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

import { CommunicatePatientListService }    from './services/communicate_patients_list.service';
import { HTTPPatientsListService }    from './services/http_patients_list.service';
import { SharedService }    from './services/shared_service';


@NgModule({
  imports:      [ CommonModule ],providers:    [
    CommunicatePatientListService,HTTPPatientsListService,SharedService
  ],exports: []
})
export class CoreModule {}

更新2.我尝试了不同的方法来提供给我的东西,我发现了一个有趣的时刻.

当我通过标准导入导入COREModule单例服务时,它不起作用,但是当我通过System.js别名导入它时,它现在正在工作.我真的很想知道它是如何工作的.这是代码

CoreModule:
import {
  ModuleWithProviders,SkipSelf }       from '@angular/core';

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


import { HeaderModule } from './modules/header/header.module';
import { FooterComponent } from './modules/footer/footer.component';


//THAT DOESNT WORK
// import { CommunicatePatientListService }    from './services/communicate_patients_list.service';
// import { HTTPPatientsListService }    from './services/http_patients_list.service';
// import { SharedService }    from './services/shared_service';
// import { SchedulerSharedService }    from './services/scheduler_shared.service';
// import { FormChangeService }    from './services/on_form_change.service';

//IT IS WORKING NOW
import { CommunicatePatientListService } from '%sharedServices%/communicate_patients_list.service';
import { HTTPPatientsListService } from 'httpPatientsListService';
import { SharedService } from 'sharedService';
import { SchedulerSharedService } from 'schedulerSharedService';
import { FormChangeService } from 'formChangeService';



@NgModule({
  imports:      [
    CommonModule,HeaderModule,],declarations: [
    FooterComponent
  ],exports: [
    FooterComponent,HeaderModule
  ]
})
export class CoreModule {

  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(): ModuleWithProviders {
    return {
      ngModule : CoreModule,providers:    [
        CommunicatePatientListService,SharedService,FormChangeService,SchedulerSharedService
      ]
    };
  }


}

患者列表组件

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

import { CommunicatePatientListService } from '%sharedServices%/communicate_patients_list.service';
    import { HTTPPatientsListService } from 'httpPatientsListService';
    import { SharedService } from 'sharedService';
    import { SchedulerSharedService } from 'schedulerSharedService';
    import { FormChangeService } from 'formChangeService';

    import { Config } from 'appConfig';
    /* ------- !Config  ---------*/

    const MODULE_NAME: string = 'patients_list';
    const MODULE_PATH: string = `${Config.getProdFolderName()}/modules/patients/${MODULE_NAME}`;


    @Component({
      templateUrl: `${MODULE_PATH}/${MODULE_NAME}.component.html`,styleUrls: [`${MODULE_PATH}/${MODULE_NAME}.component.css`,]
    })


    export class PatientsListComponent implements OnInit {
      constructor(
        private patientsListService:HTTPPatientsListService,private patsListServCom:CommunicatePatientListService,private schedulerSharedService:SchedulerSharedService,private sharedService:SharedService
      ) {
  }

最好的方法是使用提供程序创建模块.请记住,如果您的服务位于共享模块中,您可能会获得多个实例.最好的办法是使用Module.forRoot配置模块.

By convention,the forRoot static method both provides and configures
services at the same time. It takes a service configuration object and
returns a ModuleWithProviders.

关于它,这里是完整的Doc.

Call forRoot only in the root application module,AppModule. Calling
it in any other module,particularly in a lazy loaded module,is
contrary to the intent and is likely to produce a runtime error.

Remember to import the result; don’t add it to any other @NgModule
list.

@NgModule({
    imports: [CommonModule],declarations: [SomeComponent],exports: [SomeComponent]
})
export class CoreModule {
    static forRoot(): ModuleWithProviders {
        return {
            ngModule: CoreModule,providers: [SomeService]
        };
    }
}

然后导入模块看起来像：

@NgModule({
  imports: [
    /** other modules import **/
    CoreModule.forRoot(),// you can also pass some config here if needed
    routing
  ],declarations: [ AppComponent ],bootstrap:    [ AppComponent ]
})
export class AppModule { }

如果要防止重新导入CoreModule

Only the root AppModule should import the CoreModule. Bad things
happen if a lazy loaded module imports it.

@NgModule({
  imports:      [ CommonModule ],declarations: [ SomeComponent ],exports:      [ SomeComponent ],})
export class CoreModule {

  constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
    if (parentModule) {
      throw new Error(
        'CoreModule is already loaded. Import it in the AppModule only');
    }
  }

  static forRoot(config: UserServiceConfig): ModuleWithProviders {
    return {
      ngModule: CoreModule,providers: [SomeService]
    };
  }
}

原文链接：https://www.f2er.com/angularjs/143359.html

在Angular 2中提供核心单例服务模块

猜你在找的Angularjs相关文章