我有一個(gè)selector為app-root的Angular Component：

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

在運(yùn)行時(shí)，這個(gè)h1標(biāo)簽是如何插入到整個(gè)DOM tree里的呢？

在Angular bootstrap時(shí)，根據(jù)selector app-root使用ComponentFactory創(chuàng)建Component reference：

創(chuàng)建完application Component之后，立即執(zhí)行renderView方法：

在render方法里執(zhí)行view的template函數(shù)：

executeTemplate的具體實(shí)現(xiàn)：

在函數(shù)??elementStart內(nèi)部：

把2代表的h1，即child 節(jié)點(diǎn)，append到1代表的app-root上去：

最后在platform-browser.js實(shí)現(xiàn)的class DefaultDomRenderer2里，調(diào)用dom節(jié)點(diǎn)的appendChild原生方法，完成節(jié)點(diǎn)插入到DOM tree的操作：

更多Jerry的原創(chuàng)文章，盡在：“汪子熙”:

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。