2017-03-02 74 views
1

我不能讓這段代碼的工作,不明白爲什麼它沒有顯示該按鈕:(不能讓角1.5(以打字稿)組件工作

任何想法?謝謝。

https://jsfiddle.net/slishnevsky/Let38jho/10/

角/打字稿

let app = angular.module('app', []); 

export class MyController { 

    public name: string; 

    constructor() {} 

} 

export class MyComponent implements ng.IComponentOptions { 

    public bindings: any; 
    public controller: any; 
    public controllerAs: string; 
    public template: string; 

    constructor() { 
     this.bindings = { 
      name: '@' 
     }; 
     this.controller = MyController; 
     this.controllerAs = 'vm'; 
     this.template = '<button>{{vm.name}}</button>'; 
    } 
} 

app.component('MyComponent', new MyComponent()); 

HTML

<div ng-app='app'> 

    <my-component name='Miranda'></my-component> 

</div> 

回答

1

工作小提琴:https://jsfiddle.net/13ju990x/

兩個問題:

  1. 打字稿transpiles的export關鍵字AMD還是CommonJS的(或UMD)格式。 Look here for a quick example.而且我們沒有任何模塊加載器在jsfiddle中工作(我認爲jsfiddle simpley會將您的代碼放入<script>標記中)。您可以簡單地打開開發人員工具,並在您的原始代碼中查看Uncaught ReferenceError: exports is not defined

  2. 角使用烤肉串案例。所以你需要寫app.component('myComponent', new MyComponent());而不是'MyComponenet'。我知道這很愚蠢。