我有一个简单的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创建元素: