将Angular2组件转换为ES6语法需要什么?

时间:2015-12-21 13:53:32

标签: import ecmascript-6 angular iife

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语法?

2 个答案:

答案 0 :(得分:2)

未测试!

import {Component} from 'angular2/core';

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

  }
}

也许你会因为认为你需要app变量而感到困惑?

为了明确您不需要引用app,您只需要导入AppComponent(就像您已经拥有的那样)

答案 1 :(得分:1)

如果您使用的是Babel并使用以下插件:'angular2-annotations', 'transform-decorators-legacy', 'transform-class-properties', 'transform-flow-strip-types'则无需转换语法。

您也可以在working example

中查看