Javascript 元素在Angular 2中更新_Javascript_Angular

Javascript 元素在Angular 2中更新

javascript angular

Javascript 元素在Angular 2中更新,javascript,angular,Javascript,Angular,我刚从Angular开始，我想我最好直接跳到Angular 2 我在几个地方读到的内容让我相信，当组件的模型发生变化时，Angular“神奇地”更新dom。以下报价来自（1月4日更新，因此应为最新报价）主元素要将角度组件转换为在DOM中渲染的内容，必须将角度组件与DOM元素相关联。我们称这些元素为宿主元素组件可以通过以下方式与其宿主DOM元素交互：*它可以侦听其事件。*它可以更新其属性。*它可以调用它上面的方法例如，组件使用hostListeners侦听输入事件，修剪值，然后将其存储在字

我刚从Angular开始，我想我最好直接跳到Angular 2

我在几个地方读到的内容让我相信，当组件的模型发生变化时，Angular“神奇地”更新dom。以下报价来自（1月4日更新，因此应为最新报价）

主元素

要将角度组件转换为在DOM中渲染的内容，必须将角度组件与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 = {}));

（功能（应用程序）{
app.topMenu=
核心部件({
选择器：“顶部菜单”，
模板：“{time}}”
})
.类({
构造函数：函数（）{
this.time=‘永不改变’；
setInterval（函数（）{
var listeners=document.getElementsByClassName（'time'）；
var currentTime=新日期（Date.now（））；
变量选项={
12小时：'正确'，
工作日：“长”，
月：“长”，
日期：'数字'，
年份：“数字”
}
this.time=currentTime.toLocaleTimeString（'en-us'，选项）；
console.log（本次）；
}, 1000);
}
});
document.addEventListener（'DOMContentLoaded'，function（）{
ng.platform.browser.bootstrap（应用程序顶部菜单）；
})
})（window.app | |（window.app={}））；

问题在于，在初始页面加载之后，DOM永远不会更新，而控制台却在愉快地运行。我需要添加什么才能使DOM将其内容更新到模型的更改中？

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>

希望它能帮助你，

Thierry

如果代码不是“角度方式”，我很乐意使用指针。对于我来说，这是Angular的第二天，我现在正努力坚持使用JS而不是TypeScript。说到“Angular方式”，我也被Angular 2打湿了脚，我认为用TypeScript做这件事是值得的。很多混乱都消失了。另外，像

=>

操作符这样的细节可以在回调时使

这个

变得更容易，从而节省很多痛苦。在您的示例中，检查

setInterval

回调中的

this.time

是否与您认为的一致。这不是Angular2方式。因为这个原因，他们真的在推TypeScript，因为我一直在用Angular2和TypeScript，你的代码现在看起来很陌生。你说得对，

=>

解决了这个问题。谢谢你的信息！是的，只包括文件，我够了。因此，您的问题应该是在setTimeout函数中使用“this”。使用箭头函数（我的第二句话）可以解决您的问题；-）“ZoneJS负责在引擎盖下检测组件的属性是否发生了变化，并相应地更新视图。”我认为ZoneJS并没有做到这一切。ZoneJS创建一个执行上下文，并对浏览器异步调用进行修补。当异步事件触发时，在回调处理程序运行后，Zonejs调用Angular的更改检测。Angular的更改检测检查组件输入属性的更改并传播更改，检查模板绑定，并使用发现的任何更改更新DOM。至少我想一切都是这样的。是的，我同意你的看法，马克！我只是想告诉大家ZoneJS需要在那里触发变更检测，但我不想透露更多细节。也许不太清楚。我用这种方式更新了我答案的第一句话。非常感谢您的评论；-）

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