元素更新在角2

我刚刚开始接触角和想我会是最好的关闭直接进入角2.元素更新在角2

我读过几个地方使我相信角“神奇地“更新组件模型更改时的dom。以下报价是从http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2（更新于1月4日，因此应该是最新的）。

Host元素

要打开的角度成分成在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 = {}));

的问题是，DOM的初始页面加载后就再也没有更新，而控制台愉快蜱一起。我需要添加什么来使DOM将其内容更新为模型的更改？

来源

2016-01-13 Josiah

的this关键字如果代码是不是“角办法”，我会为指针感到高兴。对于我来说，这是Angular的第2天，现在我试图坚持JS而不是TypeScript。 – Josiah

说到“角度的方式”，我还得到了我的脚湿2角，认为这是值得在Typescript中做。很多混乱消失。像'=>'运算符这样的细节通过在有回调的时候以更简单的方式使'this'变得更容易，从而可以节省很多的痛苦。在你的例子中，检查你的'setInterval'回调中的'this.time'是你认为的。 –

这不是Angular2的方式。由于这个原因，他们确实在推动TypeScript，因为我一直使用TypeScript的Angular2，而且你的代码现在看起来很陌生。 – inoabrian

ZoneJS负责触发Angular2的更改检测（相应地更新视图）。这意味着你需要有相应的JS文件（angular2-polyfills.js）纳入到你的HTML页面：

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

这就是为什么你可以直接使用setTimeout功能和Angular2不提供timeout服务。

此外，我看到您的代码中的错误。你应该用一个箭头功能能够使用对应于分量

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

希望它可以帮助你，蒂埃里

来源

2016-01-13 19:02:23

你是对的，'=>'解决了这个问题。感谢您的信息！ – Josiah

是的只包括文件我足够的区域。所以你的问题应该是在setTimeout函数中使用“this”。使用箭头函数（我的第二条评论）应该可以解决您的问题;-) –

“ZoneJS负责在引擎盖下检测组件的属性发生了变化并相应地更新视图。”我不认为ZoneJS能够做到这一点。 ZoneJS创建一个执行上下文，猴子为浏览器的异步调用打补丁。当异步事件触发时，在您的回调处理程序运行后，Zonejs会调用Angular的变化检测。 Angular的更改检测检查组件输入属性的更改并传播更改，并检查模板绑定，并使用发现的任何更改更新DOM。至少...我认为这是一切工作的方式。 –

元素更新在角2

回答

相关问题