將Angular2組件轉換為ES6語法需要什么？

Question

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語法？

Answer 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 （就像你已經擁有的那樣）

Answer 2

如果您正在使用Babel並使用以下插件： 'angular2-annotations', 'transform-decorators-legacy', 'transform-class-properties', 'transform-flow-strip-types' ，則無需轉換語法。

您也可以在一個工作示例中查看它。