类以外的注入

到目前为止,注入过的唯一类型是类,但Angular 2不限于注入类。 还简要提及了 providers 的概念。

到目前为止, providers 已经在数组中使用Angular 2的@NgModule元数据。 providers 也都是类标识符。 Angular 2让程序员用更详细的“食谱”指定 providers 。 这是通过为提供Angular 2一个对象字面量({})实现的:

  1. import { NgModule } from '@angular/core';
  2. import { App } from './containers/app'; // hypothetical app component
  3. import { ChatWidget } from './components/chat-widget';
  4. @NgModule({
  5. providers: [ { provide: ChatWidget, useClass: ChatWidget } ],
  6. })
  7. export class DiExample {};

这个例子是另一个provide一个类的例子,但它使用Angular 2的更长格式。

这个长格式很方便。 如果程序员想要关闭ChatWidget实现,例如允许一个MockChatWidget,他们可以轻松地做到:

  1. import { NgModule } from '@angular/core';
  2. import { App } from './containers/app'; // hypothetical app component
  3. import { ChatWidget } from './components/chat-widget';
  4. import { MockChatWidget } from './components/mock-chat-widget';
  5. @NgModule({
  6. providers: [ { provide: ChatWidget, useClass: MockChatWidget } ],
  7. })
  8. export class DiExample {};

这个实现交换的最好的部分是注入系统知道如何构建MockChatWidget,并将排序所有provider

注射器可以使用多个类。 useValueuseFactory是Angular 2可以使用的 provider “recipes”的另外两个示例。 例如:

  1. import { NgModule } from '@angular/core';
  2. import { App } from './containers/app'; // hypothetical app component
  3. const randomFactory = () => { return Math.random(); };
  4. @NgModule({
  5. providers: [ { provide: 'Random', useFactory: randomFactory } ],
  6. })
  7. export class DiExample {};

在假设的app组件中,“Random”可以注入:

  1. import { Component, Inject, provide } from '@angular/core';
  2. @Component({
  3. selector: 'app',
  4. template: `Random: {{ value }}`
  5. })
  6. export class App {
  7. value: number;
  8. constructor(@Inject('Random') r) {
  9. this.value = r;
  10. }
  11. }

View Example

一个重要的注意事项是,provide 函数和消费者中的 ‘Random’ 都在引号中。 这是因为作为一个工厂,我们没有在任何地方访问Random标识符。

上面的例子使用Angular 2的useFactory。 当Angular 2被告知使用useFactoryprovide 东西时,Angular 2期望提供的值是一个函数。 有时函数和类甚至比需要的更多。 Angular 2有一个名为useValue的“食谱”,这些情况几乎完全相同:

  1. import { NgModule } from '@angular/core';
  2. import { App } from './containers/app'; // hypothetical app component
  3. @NgModule({
  4. providers: [ { provide: 'Random', useValue: Math.random() } ],
  5. })
  6. export class DiExample {};

View Example

在这种情况下,Math.random的乘积被分配给传递给 provideruseValue属性。