我有一個(gè)簡(jiǎn)單的Component：

@Component({selector: "app-root",template: ` <a href="/custom2">Click me</a><div class="container"><router-outlet></router-outlet></div>` }) export class AppComponent {

運(yùn)行時(shí)，router-outlet節(jié)點(diǎn)的下一個(gè)兄弟節(jié)點(diǎn)，會(huì)自動(dòng)插入/custom2路徑指向的Angular Component的selector:

在router.js實(shí)現(xiàn)代碼里，能看到t.targetRouterState:

這個(gè)變量的類(lèi)型是RouterStateSnapshot，里面包含了待activate的target url：/custom2

我們?cè)趹?yīng)用代碼里為custom2指定的Component的映射關(guān)系，就體現(xiàn)在下圖的routeConfig變量里：

根據(jù)Component拿到Componentfactory，然后創(chuàng)建Component實(shí)例：

創(chuàng)建待顯示Component的root節(jié)點(diǎn)：

最后通過(guò)core.js到animation.js再到platform-browser.js, 調(diào)用瀏覽器原生的DOM api創(chuàng)建元素：

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

總結(jié)

以上是生活随笔為你收集整理的Angular router-outlet占位符层级结构的子节点，运行时是如何插入的的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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