我需要什么将我的 Angular2 组件转换为 ES6 语法？答案

【问题标题】：What do I need to convert my Angular2 component to ES6 syntax?我需要什么将我的 Angular2 组件转换为 ES6 语法？
【发布时间】：2016-03-27 14:58:09
【问题描述】：

index.js

这是我的入口点

import * as stylesheet from '../assets/styles/app.scss';

import jQuery from '../node_modules/jquery/dist/jquery';
import $ from '../node_modules/jquery/dist/jquery';

import {bootstrap}    from './boot'
import {AppComponent} from './app.component'

bootstrap(AppComponent);

app.component.js

这行得通

(function (app) {
    app.AppComponent = ng.core
        .Component({
            selector: 'my-app',
            template: '<h1>My First Angular 2 App</h1>'
        })
        .Class({
            constructor: function () {
            }
        });
})(window.app || (window.app = {}));

问题

我尝试使用来自How do I write angular2 without decorator syntax? 的答案但没有成功。

如何摆脱 IIFE 并使用 ES6 语法？

【问题讨论】：

不清楚你在问什么。你想在有或没有 @Class 装饰器支持的情况下使用 ES6 吗？如果是后者，则需要通过转译器设置启用装饰器支持。

标签： import ecmascript-6 angular iife

【解决方案1】：

未经测试！

import {Component} from 'angular2/core';

@Component({
  selector: 'my-app',
  template: `
    <h1>
        My First Angular 2 App
    </h1>
  `
})
export class AppComponent {
  constructor () {

  }
}

您可能因为认为需要app 变量而感到有些困惑？

为了清楚你不需要引用app，你只需要导入AppComponent（就像你已经拥有的那样）

【讨论】：

【解决方案2】：

如果你正在使用 Babel 并使用以下插件：'angular2-annotations', 'transform-decorators-legacy', 'transform-class-properties', 'transform-flow-strip-types' 则无需转换语法。

您也可以在working example 中查看。

【讨论】：