使用Angular 2绑定注入服务时出现错误

Question

我有这个脚本，我要转换到es5使用babel

import {Component, View} from 'angular2/angular2';
class Images {
  getImagesURLs() {
      return ["images/Desert.jpg", "images/Chrysanthemum.jpg", "images/Hydrangeas.jpg", "images/Jellyfish.jpg", "images/Lighthouse.jpg"];
  }
}
@Component({
  selector: 'home',
  bindings: [Images]
})
@View({
  template: '<div>Home</div>'
})
export class Home {
  constructor(images) {
    this.images = images.getImagesURLs();
  }
}

我得到以下错误

无法解析Home(?)的所有参数。确保它们都有有效的类型或注释。

我需要改变这段代码吗?或者是Babel或SystemJS配置?

Answer 1

这是一个相当老的例子。

在使用atScript的时候，您可以使用traceur来实现这一点(不太确定babel)。你可以告诉它激活输入和注释，这样代码就可以在没有Typescript的情况下完美地工作。

今天，如果你想实现这个目标，你需要激活babel上的阶段1，然后使用正确的注入语法:

import {Inject} from 'angular2/angular2';

然后在构造函数中:

constructor(@Inject(Images) image) {}

如果这不起作用，你可以教巴别塔那些新把戏:

npm install babel-plugin-angular2-annotations
npm install babel-plugin-type-assertion

最后，您可以这样配置babel (.babelrc):

{
  "optional": ["es7.decorators"],
  plugins: [
    "angular2-annotations",
    "type-assertion"
  ]
}

那么你可以这样做:

constructor(image:Images) {}