• 类以外的注入

    类以外的注入

    到目前为止,注入过的唯一类型是类,但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属性。