元素更新在角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

回答

相關問題