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

Question

我正在使用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的注入方式，是否需要在其他地方进行其他操作？

Answer 1

您需要将其添加到Component批注的viewBindings中：

viewBindings: [TitleService]

请注意，您只需要执行一次，例如在Root组件中，层次结构中的所有其他组件都可以从根组件中注入它，就好像该组件的注入器无法解析它找到之前的依赖关系一样。 如果您定义一个viewBindings，那么我相信每个地方都应该有相同的实例。

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

Answer 2

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