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

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

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

2 个答案: