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

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

viewBindings: [TitleService]

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

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

Answer 2

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

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

Dependency Injection in Angular2 - TypeScript syntax vs @Inject

typescript

angular