Angular2 中的依赖注入 - TypeScript 语法与 @Inject答案

【问题标题】：Dependency Injection in Angular2 - TypeScript syntax vs @InjectAngular2 中的依赖注入 - TypeScript 语法与 @Inject
【发布时间】：2015-11-05 17:57:51
【问题描述】：

我正在使用Angular2 build 2.0.0-alpha.34，但我不确定为什么这两段不同的代码会给我不同的结果。

唯一的区别是使用@Inject(TitleService) titleService 与使用titleService: TitleService

这可以正常工作（ES2015 方式）

import {Inject, Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {titleComponent} from './components/title';
import {TitleService} from './services/services';

// Annotation section
@Component({
    selector: 'my-app'
})
@View({
    templateUrl: './html/app.html',
    directives: [titleComponent, NgFor]
})
// Component controller
class MyAppComponent {
    titles: Array<Object>;
    constructor(@Inject(TitleService) titleService) {
        console.log(titleService)
        this.titles = titleService.getTitles();
    }
}

bootstrap(MyAppComponent,[TitleService]);

这不起作用（TypeScript 方式），它永远不会在构造函数中调用 console.log，但它不会引发错误

import {Inject, Component, View, bootstrap, NgFor} from 'angular2/angular2';
import {titleComponent} from './components/title';
import {TitleService} from './services/services';

// Annotation section
@Component({
    selector: 'my-app'
})
@View({
    templateUrl: './html/app.html',
    directives: [titleComponent, NgFor]
})
// Component controller
class MyAppComponent {
    titles: Array<Object>;
    constructor(titleService: TitleService) {
        console.log(titleService)
        this.titles = titleService.getTitles();
    }
}

bootstrap(MyAppComponent,[TitleService]);

如果我使用 TypeScript 的方式进行注入，是否需要在其他地方做点别的事情？

【问题讨论】：

标签： angular typescript

【解决方案1】：

您需要将它添加到组件注释的 viewBindings 中：

viewBindings: [TitleService]

请注意，您只需要执行一次，例如在 Root 组件中，层次结构中的每个其他组件都会从根组件中注入它，就好像组件的注入器无法解决它直到它上升的依赖项找到它。如果您定义一个 viewBindings，我相信您应该在任何地方都有相同的实例。

编辑：重命名 alpha 34 中的参数。

【讨论】：

OP 正在通过bootstrap(MyAppComponent,[TitleService]) 注入服务，所以我认为它应该可以工作。 viewInjector 在 alpha-34 中也变成了 viewBindings。
@AnotherDev 还有两件事，viewInjector 已重命名为绑定，您是否检查过您是否将 TitleService 声明为 Injectable ？我刚刚检查了一个本地项目，只使用了 bindings 属性而不引导服务，它工作得很好。但是你上面的代码乍一看应该可以工作，你有什么错误吗？
没有错误。如果我使用viewBindings，我会遇到同样的问题。它适用于@Inject，但不适用于 TypeScript。如何将 TitleService 声明为 Injectable？现在它只是定义为一个类
你需要使用@Injectable 装饰器。你可以在这里看到构造函数的参数：documentation for ComponentAnnotation。所以你有 viewBindings，以及旧 viewInjector 和 appInjector 的绑定。我昨晚又做了一个测试，它在绑定参数上运行良好。

【解决方案2】：

我在 JavaScript 文件中定义了 TitleService，使用 ES2015 类，我只需要将其更改为 TypeScript 文件，以便正确编译。哎呀。

【讨论】：