Angular router-outlet占位符層級結構的子節點，運作時是如何插入的

我有一個簡單的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建立元素：