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创建元素：