我需要什么才能将Angular2组件转换为ES6语法



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

问题

我试着使用"如何在没有装饰语法的情况下编写angular2?"中的答案?没有成功。

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

未测试!

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

也许你觉得自己需要app变量有点困惑?

需要明确的是,您不需要引用app,只需要导入AppComponent(正如您已经拥有的那样)

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

您也可以在工作示例中检查它。

最新更新