Angular2 - 在组件外部使用依赖注入答案

【问题标题】：Angular2 - Use Dependency Injection outside ComponentsAngular2 - 在组件外部使用依赖注入
【发布时间】：2018-01-15 15:46:54
【问题描述】：

在我的应用程序中，我使用 DI 将有关 UserLogged 的信息传递给需要此类信息的不同组件。这意味着我有一个像这样的main.ts 类

import {AppComponent} from './app.component';
import {UserLogged} from './userLogged'

bootstrap(AppComponent, [UserLogged]);

而需要使用UserLogged的实例的组件有这样的构造函数

constructor(private _user: UserLogged)

现在我想在简单的 TypeScript 类（不是 @Component）中使用 UserLogged 的相同实例。这可能吗？换句话说，如果我不在@Component 之外，我是否也能获得由DI 注入的UserLogged 的同一个实例？

【问题讨论】：

标签： dependency-injection angular

【解决方案1】：

此构造函数也适用于服务（由 DI 创建的其他类）

 bootstrap(AppComponent, [OtherClass, UserLoggged]);

 @Injectable()
 export class UserLogged {
   log(text) {
     console.log(text);
   }
 }

 @Injectable()
 export class OtherClass {
   constructor(private _user: UserLogged) {}
 }

 class SomeComponent {
   constructor(private otherClass:OtherClass) {
     this.otherClass._user.log('xxx');
   }
 }

如果您使用new SomeClass() 创建这些类，那么您可以像这样注入它

 class SomeComponent {
   constructor(private _injector:Injector) {
     let userLog = this._injector.get(UserLogged);
     new SomeClass(userLog);
   }
 }

【讨论】：

【解决方案2】：

在您引导 angular 的文件中：

import { AppComponent } from './app.component';
import { UserLogged } from './userLogged';

declare global {
    var injector: Injector;
}

bootstrap(AppComponent, [UserLogged]).then((appRef) => {
    injector = appRef.injector;
});

在您的其他文件中：

import { UserLogged } from '../path/to/userLogged';

class TestClass {
    private userLogged: UserLogged;

    constructor() {
        this.userLogged = injector.get(UserLogged);
    }
}

【讨论】：

【解决方案3】：

为了能够在类中使用依赖注入，您需要一个装饰器，@Injectable。

@Injectable()
export class SomeClass {
  constructor(private dep:SomeDependency) {
  }
}

Injectable 这个名字并不是真正不言自明的。这是为了使类内的注入成为可能（而不是注入另一个类）。

SomeDependency 类的提供者需要从发起调用的组件中可见。

有关依赖注入和分层注入器的更多详细信息，请参阅此问题：

What's the best way to inject one service into another in angular 2 (Beta)?

【讨论】：

【解决方案4】：

我在这里进行了疯狂的猜测，但是您的意思是说您要在必须使用 providers : [UserLogged] 的情况下注入课程？如果是这样，这将起作用

providers: [ provide(UserLogged, {useClass: UserLogged} ]

将上述内容添加到您的引导程序中，当您“不想使用@Component”时，您就可以开始使用了

示例.ts

export class Sample{
   constructor(private ulog : UserLogged){}
}

在你的情况下，引导程序是：

import {provide}   from   'angular2/core';
import {HTTP_PROVIDERS}   from  'angular2/http';
bootstrap(AppComponent,[HTTP_PROVIDERS,provide(UserLogged, { useClass : UserLogged})]);

我添加了HTTP_PROVIDERS 来演示如何添加多个提供程序。干杯！

【讨论】：