Question

我有一个名为Poller的独立类。我想将此类的共享配置的实例注入到不同的组件中。例如，如果我尝试以下内容：

export const QuickPollingService = new OpaqueToken('quickPoller');
export let quickPollingServiceProvider = provide(QuickPollingService, {
    useFactory: () => {
        return new Poller(200);
    },
});
export const SlowPollingService = new OpaqueToken('slowPoller');
export let slowPollingServiceProvider = provide(SlowPollingService, {
    useFactory: () => {
        return new Poller(1000);
    },
});

像下面这样注入（使用正确的导入路径）会给我一个名字not found error：

export class ImageComponent {
    constructor(
        private element: ElementRef,
        private poller: QuickPollingService
    ) {}
}

在Angular 2中注入已配置的类实例的正确方法是什么？

Answer 1

@Inject()使用OpaqueToken

如果您使用

provide(SomeOpaqueToken ...

然后你需要像

那样注入

export class ImageComponent {
    constructor(
        private element: ElementRef,
        // v added decorator
        @Inject(SomeOpaqueToken) private poller: QuickPollingService
    ) {}
}

使用类型代替OpaqueToken

否则注册提供者

export let quickPollingServiceProvider = provide(Poller, {
    useFactory: () => {
        return new Poller(200);
    },
});

（在这种情况下不要使用OpaqueToken）

还要确保在

之类的地方添加提供程序

bootstrap(AppComponent, [quickPollingServiceProvider]);

OpaqueToken

的典型用例当您无法或不想使用特定类型注册和请求依赖时，可以使用

OpaqueToken。

您也可以使用字符串代替OpaqueToken。

如果要在类型不够独特的情况下注入原始值，则必须使用OpaqueToken或字符串。例如，当您想要注入一些配置值时。

@Injectable()
class Poller {
  constructor(@Inject('pollingInterval' private interval:number) {}
}

bootstrap(AppComponent, [
    provide('pollingInterval': {useValue: 200}),
    Poller]);

通过这种方式，您的提供商将被简化，您不需要使用工厂，因为interval依赖Poller由Angulars DI提供。

Answer 2

您需要在案例中使用@Inject装饰器来注入您的依赖项！

export class ImageComponent {
  constructor(
    private element: ElementRef,
    @Inject(QuickPollingService) private poller: Poller
  ) {}
}

在您的情况下，QuickPollingService对应一个不透明的标记，并且不是您要注入的类型（类）。您希望注入使用向不透明令牌Poller注册的提供程序创建的QuickPollingService类型。

事实上，以下就足够了：

export let quickPollingServiceProvider = provide(Poller, {
  useFactory: () => {
    return new Poller(200);
  }
});

在这种情况下，您可以使用以下内容：

export class ImageComponent {
  constructor(
    private element: ElementRef,
    private poller: Poller
  ) {}
}

Angular 2依赖注入单例

2 个答案: