Angular 2/4中如何在NgModule里向服务构造函数传入对象

我太懂这种重复写new MyService(new MyClass())的烦躁了——Angular的依赖注入系统就是专门解决这类问题的，咱们一步步把这个繁琐的操作换掉：

1. 先确保MyClass具备可注入性（按需操作） #

如果MyClass需要被Angular统一管理，先给它加上@Injectable装饰器：

@Injectable({
  providedIn: 'root' // 或者指定到你要使用的具体模块中
})
export class MyClass {
  // 你的MyClass业务代码
}

要是你只想用一个固定的MyClass实例（不需要Angular管理它的生命周期），可以跳过这一步直接看下一步。

2. 两种配置MyService注入的方案 #

方案一：让Angular自动创建MyClass实例并注入 #

找到你要注册服务的NgModule（比如AppModule或者功能模块），在providers数组里添加如下配置：

@NgModule({
  // ...模块的其他配置项（declarations、imports等）
  providers: [
    MyClass, // 告诉Angular需要创建MyClass的实例
    {
      provide: MyService,
      useFactory: (myClassInstance: MyClass) => new MyService(myClassInstance),
      deps: [MyClass] // 声明该工厂函数需要依赖MyClass的实例
    }
  ]
})
export class YourTargetModule { }

之后在任何组件里，直接注入MyService就能用了，完全不用手动实例化：

@Component({ /* 组件配置 */ })
export class YourComponent {
  constructor(private _myService: MyService) {}

  callServiceMethod() {
    this._myService.someMethod(); // 直接调用，省心！
  }
}

方案二：传入自定义的MyClass实例 #

要是你想给所有组件用同一个预先配置好的MyClass实例，就这么配置：

// 先创建并初始化你的自定义实例
const preConfiguredMyClass = new MyClass();
// 比如给实例设置一些初始值：preConfiguredMyClass.someProp = 'xxx';

@NgModule({
  providers: [
    {
      provide: MyClass,
      useValue: preConfiguredMyClass // 告诉Angular用这个现成的实例
    },
    MyService // Angular会自动把上面的MyClass实例注入到MyService中
  ]
})
export class YourTargetModule { }

3. 更简洁的简化方案（如果用root级注入） #

如果你的MyService已经设置了providedIn: 'root'，那连模块配置都省了——只要MyClass也是providedIn: 'root'的，Angular会自动解析依赖：

@Injectable({
  providedIn: 'root'
})
export class MyService {
  constructor(myObject: MyClass) {}
}

之后组件里直接注入MyService就能用，全程不用手动写任何new操作。

这样改完之后，所有组件都不用重复写实例化代码了，后续维护也只需要在一处修改配置就行～

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