我有一個簡單的Component：

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

運行時，router-outlet節點的下一個兄弟節點，會自動插入/custom2路徑指向的Angular Component的selector:

在router.js實現代碼里，能看到t.targetRouterState:

這個變量的類型是RouterStateSnapshot，里面包含了待activate的target url：/custom2

我們在應用代碼里為custom2指定的Component的映射關系，就體現在下圖的routeConfig變量里：

根據Component拿到Componentfactory，然后創建Component實例：

創建待顯示Component的root節點：

最后通過core.js到animation.js再到platform-browser.js, 調用瀏覽器原生的DOM api創建元素：

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

總結

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

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