Angular 2’s DI

最后一个例子介绍了一个假设的Injector对象。Angular 2更进一步简化了DI。 使用Angular 2，程序员几乎不必陷入注入细节。

Angular 2的DI系统（大部分）通过@NgModule来控制。 具体来说是providers 和declarations数组。 （declarations是我们放置组件，管道和指令的地方；providers 是我们提供服务的地方）

例如：

  1. import { Injectable, NgModule } from '@angular/core';
  3. @Component({...})
  4. class ChatWidget {
  5.   constructor(private authService: AuthService, private authWidget: AuthWidget,
  6.     private chatSocket: ChatSocket) {}
  7. }
  9. @NgModule({
  10.   declarations: [ ChatWidget ]
  11. })
  12. export class AppModule {};

在上面的例子中，AppModule被告知关于ChatWidget类。 另一种说法是，Angular 2已经提供了一个ChatWidget。

这看起来很简单，但读者会想知道Angular 2如何知道如何构建ChatWidget 。如果ChatWidget是一个字符串或一个简单的函数怎么办？

Angular 2假设它被赋予一个类。

AuthService ，AuthWidget和ChatSocket怎么样？ ChatWidget如何获取这些？

这不是，至少还没有。 Angular 2不知道他们。 这可以很容易改变：

  1. import { Injectable, NgModule } from '@angular/core';
  3. @Component({...})
  4. class ChatWidget {
  5.   constructor(private authService: AuthService, private authWidget: AuthWidget,
  6.     private chatSocket: ChatSocket) {}
  7. }
  9. @Component({...})
  10. class AuthWidget {}
  12. @Injectable()
  13. class AuthService {}
  15. @Injectable()
  16. class ChatSocket {}
  18. @NgModule({
  19.   declarations[ ChatWidget, AuthWidget ]
  20.   providers: [ AuthService, ChatSocket ],
  21. })

好吧，这开始看起更完整一些了。虽然还不清楚ChatWidget如何被告知关于它的依赖。也许这与那些奇怪的@Injectable语句有关。