如何在没有装饰器的情况下将 Angular2 与 ES6 一起使用？

【问题标题】：How to use Angular2 with ES6 without decorators?如何在没有装饰器的情况下将 Angular2 与 ES6 一起使用？
【发布时间】：2016-07-05 04:18:33
【问题描述】：

按照Angular 2 网站上的 ES5 快速入门，我得到了以下内容：

mycomponent =
    ng.core.Component({
        ...
    })
    .Class({
        constructor: function() {}
    });

我想知道如何将 .Class 方法换成正确的 ES6 class 但不使用 decorators（因为它们还不是 ES 标准的一部分）

【问题讨论】：

标签： javascript angularjs angular ecmascript-6

【解决方案1】：

您可以使用带有 ComponentMetadata 类的 annotations 属性的 getter，如下所述：

import {ComponentMetadata,Inject} from 'angular2/core';
import {FormBuilder} from 'angular2/common';

export class AppComponent {
  constructor(fb) {
    console.log(fb);
  }

  static get parameters() {
    return [[FormBuilder]];
  }

  static get annotations() {
    return [
      new ComponentMetadata({
        selector: 'my-app',
        template: `
          <div>
            Test
          </div>
        `
      })
    ];
  }
}

看到这个 plunkr：https://plnkr.co/edit/VqDSDuroK29iAxGzA5Lc?p=preview

你会注意到像 Babel 这样的工具支持装饰器。

【讨论】：