Angular's DI

The last example introduced a hypothetical Injector object. Angularsimplifies DI even further. With Angular, programmers almost never have to getbogged down with injection details.

Angular's DI system is (mostly) controlled through @NgModule. Specificallythe providers and declarations array. (declarations is where we put components,pipes and directives; providers is where we put services)

For example:

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

In the above example the AppModule is told about the ChatWidget class. Another wayof saying this is that Angular has been provided a ChatWidget.

That seems pretty straightforward, but astute readers will be wondering howAngular knows how to build ChatWidget. What if ChatWidget was a string, ora plain function?

Angular assumes that it's being given a class.

What about AuthService, AuthWidget and ChatSocket? How is ChatWidget getting those?

It's not, at least not yet. Angular does not know about them yet. That canbe changed easily enough:

  1. import { Injectable, NgModule } from '@angular/core';
  3. @Component({
  4.   // ...
  5. })
  6. class ChatWidget {
  7.   constructor(private authService: AuthService, private authWidget: AuthWidget,
  8.     private chatSocket: ChatSocket) {}
  9. }
  11. @Component({
  12.   // ...
  13. })
  14. class AuthWidget {}
  16. @Injectable()
  17. class AuthService {}
  19. @Injectable()
  20. class ChatSocket {}
  22. @NgModule({
  23.   declarations[ ChatWidget, AuthWidget ]
  24.   providers: [ AuthService, ChatSocket ],
  25. })

Okay, this is starting to look a little bit more complete. Although it's stillunclear how ChatWidget is being told about its dependencies. Perhaps that isrelated to those odd @Injectable statements.

原文: https://angular-2-training-book.rangle.io/handout/di/angular2/