我有一個selector為app-root的Angular Component：

其模板文件里只有一行html代碼：

在運行時，這個h1標簽是如何插入到整個DOM tree里的呢？

在Angular bootstrap時，根據selector app-root使用ComponentFactory創建Component reference：

創建完application Component之后，立即執行renderView方法：

在render方法里執行view的template函數：

executeTemplate的具體實現：

在函數??elementStart內部：

把2代表的h1，即child 節點，append到1代表的app-root上去：

最后在platform-browser.js實現的class DefaultDomRenderer2里，調用dom節點的appendChild原生方法，完成節點插入到DOM tree的操作：

更多Jerry的原創文章，盡在：“汪子熙”:

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Angular Component模板里的元素，运行时如何被生成并插入到DOM tree中的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。