2016-09-16 59 views
0

我正在使用最后一个可用的公共版本(beta17),我不明白为什么一个简单的绑定(通过飞转换)不起作用。 plnkr有什么问题? http://plnkr.co/edit/PfAUb5hOvgTcn0vbOdG1Angular 2:绑定JS没有Node.js

的index.html

<!doctype html> 
<meta charset='utf-8'/> 
<html> 
<head> 
    <!-- CSS --> 
    <link rel='stylesheet' href='assets/bootstrap4.0.0-alpha.4/css/bootstrap.css' type="text/css"/> 
    <!-- Angular libraries --> 
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-polyfills.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.17/Rx.umd.js"></script> 
    <script src="https://code.angularjs.org/2.0.0-beta.17/angular2-all.umd.dev.js"></script> 
    <!-- Angular app modules --> 
    <script src='app/app.js'></script> 
    <script src="app/components/converter/converter.js"></script> 
</head> 

<body align='center'> 
    <h1>Temperature Converter using Angular 2</h1> 
    <converter class='converter'></converter> 
</body> 

</html> 

/app/app.js

'use strict'; 

(function (app) { 
    document.addEventListener('DOMContentLoaded',() => { 
    ng.platform.browser.bootstrap(app.ConverterComponent); 
    }); 
})(window.app || (window.app = {})); 

/app/components/converter/converter.js

(function (app) { 
    app.ConverterComponent = ng.core 
    .Component({ 
     selector: 'converter', 
     templateUrl: '/app/components/converter/template.html' 
     }) 
    .Class({ 
     constructor: function() { 
     this.temperature = ''; 

     let temp = this.temperature; 

     temp = parseInt(temp, 10); 
     this.fahrenheit = ((9/5) * temp) + 32; 
     this.kelvin = (temp + 273.15); 
     } 
    }) 

})(window.app || (window.app = {})); 

/app/components/converter/template.html

<div class="box"> 

    <div> 
     <label for="temp">Enter your temperature (ºC):</label> 
     <br> 
     <input id="temp" [(ngModel)]="temperature" class="textfield"> 
    </div> 

    <div [hidden]="temperature"> 
    Waiting for your temperature... 
    </div> 

    <div [hidden]="!temperature"> 
    <h3>{{fahrenheit}} ºF</h3> 
    <h3>{{kelvin}} K</h3> 
    </div> 

</div> 

回答

0

你必须使你的所有URL而不出/开始像app/app.js代替/app/app.js

这里是Plunkr

注意:我建议你使用Angular 2 Final版本而不是使用旧版本

+0

我也是。但现在没有公共文件而不是npm。 而且它仍然不起作用。 –

+0

@ValSaven你是什么意思? –

+0

这里https://code.angularjs.org/最后一个版本是beta17。更改url名称绑定后仍然无法正常工作。 –