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

我收到以下错误

无法解析Home（？）的所有参数。确保它们都有有效的类型或注释。

我是否需要以某种方式更改此代码？或者可能是Babel或SystemJS配置？

Answer 1

这是一个很老的例子。

在当天，你有atScript的地方，你可以通过traceur实现这一点（不太确定babel）。您可以告诉它激活键入和注释，以便代码在没有Typescript的情况下完美地工作。

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

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

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

1 个答案: