注射剂在 angular 2.0 最新版本 26 中不起作用

Question

我正在浏览 angular2.0 演示应用程序，但似乎注射剂从 build 24 开始不起作用，并给我错误
"ORIGINAL ERROR: Cannot resolve all parameters for MyAppComponent. Make sure they all have valid type or annotations."
直到 build 23 它工作正常，请帮我解决问题
下面是演示代码，我只是为了学习目的对原始代码进行了一些操作

import {Component, View, bootstrap, NgFor} from 'angular2/angular2';


module foo{
  class FriendsService {
    names: Array<string>;
    constructor() {
        this.names = ["Alice", "Aarav", "Martín", "Shannon", "Ariana","Kai"];
    }
}


@Component({
    selector: 'array',
    injecetables: [FriendsService]

})
@View({
        template: '<p>My name: {{ myName }}</p><p>Friends:</p><ul><li *ng-for="#name of names">{{ name }}</li></ul>',
        directives: [NgFor]
}) 
   export class arrayComponent {
    myName: string;
    names: Array<string>;

    constructor(friendsService: FriendsService) {
       this.myName = 'Alice';
       this.names = friendsService.names;
     }
   }
 }

bootstrap(foo.arrayComponent);

Answer 1

injectables 的新语法是 appInjector。

尝试：

@Component({
  selector: 'array',
  appInjector: [FriendsService]
})

此外，您需要将 Component 和 View 的导入更改为：

import {ComponentAnnotation as Component, ViewAnnotation as View} from "angular2/angular2";

Answer 2

module foo{ class FriendsService {...

您的 FriendsService class 是在一个模块中定义的，这在两个方面是一个问题：

您的 class 需要从模块中导出，以使其在 foo
当您引用 FriendsSerivce 时，您并未指定它在 foo 模块中。

我建议完全删除 foo 模块并改为依赖 amd/commonjs 中的模块模式。这意味着您不需要导出 class（假设它们在同一个文件中）并且您不需要更改对组件中 class 的引用。

Answer 3

您的 FriendsService 是在一个模块中抽象的，没有被导出，这就是 arrayComponent 无法访问它并引发错误的原因。

您应该只取出模块并在相同范围内在 arrayComponent 上方声明 foo。

此外，您最后的 bootstrap 是错误的，因为 arrayComponent 不是 foo 的一部分。顺其自然

bootstrap(arrayComponent)

应该没问题。

Answer 4

似乎 the currently latest angular2, alpha-35, 将 appInjector 替换为 bindings。

像这样：

import {FriendsService} from 'FriendsService';

@Component({
    selector: 'array',
    bindings: [FriendsService]
})

我还必须显式导出 FriendsService:

export class FriendsService {

Complete code example here

Answer 5

在Angular2中有应用程序范围的注入器，然后是组件注入器。

如果您只想在整个应用程序中使用一个 FriendsService 实例，请将其包含在 bootstrap() 数组中：

@Component({
   // providers: [FriendsService],
   ...

bootstrap(App, [FriendsService])

如果您希望每个组件有一个实例，请改用组件配置对象中的 providers 数组：

@Component({
   providers: [FriendsService ],
   ...

bootstrap(App, [])

Plunker

有关详细信息，请参阅 Hierarchical Injectors 文档。

注射剂在 angular 2.0 最新版本 26 中不起作用

injectables not working in angular 2.0 latest build 26

typescript1.5

angular