@Inject and @Injectable

Statements that look like @SomeName are decorators. Decoratorsare a proposed extension to JavaScript. In short, decorators let programmersmodify and/or tag methods, classes, properties and parameters. There is a lotto decorators. In this section the focus will be on decorators relevant to DI:@Inject and @Injectable. For more information on Decoratorsplease see the EcmaScript 6 and TypeScript Features section.

@Inject()

@Inject() is a manual mechanism for letting Angular know that aparameter must be injected. It can be used like so:

import { Component, Inject } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';
@Component({
  selector: 'app-root',
  template: `Encryption: {{ encryption }}`
})
export class AppComponent {
  encryption = this.chatWidget.chatSocket.encryption;
  constructor(@Inject(ChatWidget) private chatWidget) { }
}

In the above we've asked for chatWidget to be the singleton Angular associates withthe class symbol ChatWidget by calling @Inject(ChatWidget). It's importantto note that we're using ChatWidget for its typings and as a reference toits singleton. We are not using ChatWidget to instantiate anything, Angulardoes that for us behind the scenes.

When using TypeScript, @Inject is only needed for injecting primitives.TypeScript's types let Angular know what to do in most cases. The aboveexample would be simplified in TypeScript to:

import { Component } from '@angular/core';
import { ChatWidget } from '../components/chat-widget';
@Component({
  selector: 'app',
  template: `Encryption: {{ encryption }}`
})
export class App {
  encryption = this.chatWidget.chatSocket.encryption;
  constructor(private chatWidget: ChatWidget) { }
}

View Example

@Injectable()

@Injectable() lets Angular know that a class can be used with thedependency injector. @Injectable() is not strictly required if the classhas other Angular decorators on it or does not have any dependencies.What is important is that any class that is going to be injected with Angularis decorated. However, best practice is to decorate injectables with@Injectable(), as it makes more sense to the reader.

Here's an example of ChatWidget marked up with @Injectable:

import { Injectable } from '@angular/core';
import { AuthService } from './auth-service';
import { AuthWidget } from './auth-widget';
import { ChatSocket } from './chat-socket';
@Injectable()
export class ChatWidget {
  constructor(
    public authService: AuthService,
    public authWidget: AuthWidget,
    public chatSocket: ChatSocket) { }
}

In the above example Angular's injector determines what to inject intoChatWidget's constructor by using type information. This is possible becausethese particular dependencies are typed, and are not primitive types.In some cases Angular's DI needs more information than just types.

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