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

时间:2015-08-12 23:01:40

标签: angular typescript

我使用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的注入方式,我是否需要在某处做其他事情?

2 个答案:

答案 0 :(得分:1)

您需要在Component注释的viewBindings中添加它:

viewBindings: [TitleService]

请注意,您只需要执行一次,例如在Root组件中,并且层次结构中的每个其他组件都会从根组件中注入它,就好像组件的注入器无法解析它上升到它之前的依赖关系一样。找到它。如果你定义一个viewBindings,你应该在我认为的任何地方都有相同的实例。

编辑:在alpha 34中重命名参数。

答案 1 :(得分:0)

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