如何在Angular 4中注册全局可用的自定义单例服务

嘿，我来帮你搞定Angular 4里的服务注册和全局单例问题！下面分步骤给你讲清楚：

一、注册服务实例 #

首先你得先有一个自定义服务，比如我们创建一个MyService：

1. 创建服务文件
   你可以用Angular CLI快速生成：

   ng generate service my
   

   或者手动创建my.service.ts，内容如下：

   import { Injectable } from '@angular/core';
   
   @Injectable()
   export class MyService {
     constructor() {
       console.log('MyService 实例已创建');
     }
   
     // 示例方法，你可以替换成自己的业务逻辑
     getAppInfo() {
       return '这是全局共享的服务实例';
     }
   }
   

2. 注册服务
   在Angular 4中，服务需要在providers数组里注册才能被注入，注册位置分为两种：

   • 组件的providers数组：这种方式会为每个组件实例创建一个独立的服务实例，适合组件私有服务。
   • 模块的providers数组：这是我们实现全局单例的关键，后面会详细讲。

二、实现服务的全局单例（整个应用共享同一实例） #

Angular 4还没有Angular 6+引入的providedIn: 'root'特性，所以要实现全局单例，核心是只在根模块（通常是AppModule）的providers里注册服务，具体步骤：

1. 在根模块注册服务
   打开app.module.ts，导入你的服务并添加到providers数组：

   import { NgModule } from '@angular/core';
   import { BrowserModule } from '@angular/platform-browser';
   import { MyService } from './my.service'; // 导入服务
   import { AppComponent } from './app.component';
   
   @NgModule({
     imports: [BrowserModule],
     declarations: [AppComponent],
     providers: [MyService], // 在这里注册，全局唯一实例
     bootstrap: [AppComponent]
   })
   export class AppModule { }
   

2. 在任意组件/服务中注入使用
   现在你可以在应用的任何组件或其他服务中注入MyService，拿到的都是同一个实例：
   比如在app.component.ts中：

   import { Component } from '@angular/core';
   import { MyService } from './my.service';
   
   @Component({
     selector: 'app-root',
     template: `<h1>{{ appInfo }}</h1>`
   })
   export class AppComponent {
     appInfo: string;
   
     constructor(private myService: MyService) {
       this.appInfo = myService.getAppInfo();
     }
   }
   

3. 懒加载模块的注意事项
   如果你的应用有懒加载模块，千万不要在懒加载模块的providers里重复注册这个服务，否则会创建新的实例。如果需要在共享模块中导出服务，推荐使用forRoot()模式：

   • 创建共享模块shared.module.ts：

     import { NgModule, ModuleWithProviders } from '@angular/core';
     import { MyService } from './my.service';
     
     @NgModule({
       // 这里不要添加providers
     })
     export class SharedModule {
       static forRoot(): ModuleWithProviders {
         return {
           ngModule: SharedModule,
           providers: [MyService] // 仅在forRoot中注册
         };
       }
     }
     

   • 在AppModule中导入SharedModule.forRoot()：

     @NgModule({
       imports: [BrowserModule, SharedModule.forRoot()],
       // ...其他配置
     })
     export class AppModule { }
     

   • 懒加载模块只导入SharedModule（不带.forRoot()），这样就不会重复创建服务实例。

关键提醒 #

要确保单例，绝对不要在多个模块或组件的providers数组中重复注册同一个服务，否则Angular会为每个注册点创建新的实例。

内容的提问来源于stack exchange，提问作者Jessie