Question

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

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

bootstrap(AppComponent, [UserLogged]);

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

constructor(private _user: UserLogged)

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

Answer 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);
   }
 }

Answer 2

在你引导角度的文件中：

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);
    }
}

Answer 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)?

Answer 4

我在这里采取疯狂的猜测，但你的意思是说你想要使用providers : [UserLogged]注入课程吗？如果是这种情况，这将起作用

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

将上述内容添加到您的引导程序中，当您不想使用@Component时，您可以继续使用

sample.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来演示如何添加多个提供程序。干杯！

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

4 个答案: