Question

我刚刚开始使用Angular，并认为我最好跳到角度2。

我在几个地方读到的内容让我相信当组件的模型发生变化时，Angular会“神奇地”更新dom。以下引用来自http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2（1月4日更新，因此应该是最新的。）

主机元素

要将Angular组件转换为DOM中呈现的内容，您必须将Angular组件与DOM元素相关联。我们将这些元素称为主元素。

组件可以通过以下方式与其主机DOM元素进行交互：*它可以侦听其事件。 *它可以更新其属性。 *它可以调用它上面的方法。

例如，组件使用hostListeners侦听输入事件，修剪值，然后将其存储在字段中。 Angular会将存储的值与DOM同步。

[删除代码]

注意，我实际上并没有直接与DOM交互。 Angular 2旨在提供更高级别的API，因此本机平台DOM将仅反映Angular应用程序的状态。

所以，我的代码：

(function(app) {
  app.topMenu =
    ng.core.Component({
      selector: 'top-menu',
      template: '<span>{{time}}</span>'
    })
    .Class({
      constructor: function() { 
        this.time = 'Never Changes';

        setInterval(function () {
          var listeners = document.getElementsByClassName('time');
          var currentTime = new Date(Date.now());
          var options = { 
            hour12: 'true',
            weekday: 'long',
            month: 'long',
            day: 'numeric',
            year: 'numeric'
          }

          this.time = currentTime.toLocaleTimeString('en-us',options);
          console.log(this.time);
        }, 1000);
      }
    });

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

问题是，在初始页面加载后，DOM永远不会更新，而控制台会愉快地进行操作。我需要添加什么才能使DOM更新其内容以适应模型的变化？

Answer 1

ZoneJS负责触发Angular2的更改检测（相应地更新视图）。这意味着您需要在HTML页面中包含相应的JS文件（angular2-polyfills.js）：

<html>
  <head>
    (...)
    <script src="https://code.angularjs.org/2.0.0-beta.1/angular2-polyfills.js"></script>
    (...)
  </head>
  (...)
</html>

这就是为什么你可以直接使用setTimeout函数而Angular2不提供timeout服务。

此外，我在您的代码中看到了一个错误。您应该使用箭头函数来使用与组件

对应的this关键字

setInterval(() => {
  (...)
  this.time = currentTime.toLocaleTimeString('en-us',options);
}, 1000);

希望它可以帮到你，亨利

Angular 2中的元素更新

1 个答案: