Question

我使用的是上一个可用的公开版本（beta17），我无法理解为什么简单的绑定（通过fly转换）不能在那里工作。什么是plnkr的问题？ http://plnkr.co/edit/PfAUb5hOvgTcn0vbOdG1

的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>

Answer 1

您必须在没有app/app.js而不是/app/app.js

的Runtime.exec()的情况下启动所有网址

这是Plunkr

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

Angular 2：使用没有Node.js的JS绑定

1 个答案: