javascript - 使用 Angular 2 绑定(bind)注入(inject)服务时出错

Question

我有这个脚本，我正在使用 babel 将其转换为 es5

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();
  }
}

我收到以下错误

Cannot resolve all parameters for Home(?). Make sure they all have valid type or annotations.

我需要以某种方式更改此代码吗？或者也许是 Babel 或 SystemJS 配置？

Answer 1

这是一个非常古老的例子。

回到过去，你可以使用 atScript 来实现这一点(对 babel 不太确定)。您可以告诉它激活输入和注释，以便代码在没有 Typescript 的情况下也能完美运行。

今天，如果您想实现这一目标，您需要在 babel 上激活第 1 阶段，然后使用正确的语法进行注入(inject):

import {Inject} from 'angular2/angular2';

然后在构造函数中:

constructor(@Inject(Images) image) {}

如果这不起作用，你可以教 babel 这些新技巧:

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) {}