當我點擊某個cost center的hyperlink后：

觸發router.js里的activate方法：

在_activatedRoute里，能看到被激活，待顯示的Component是AppComponent：

router.js里和創建被激活Component相關的代碼：

activateWith(activatedRoute, resolver) {if (this.isActivated) {throw new Error('Cannot activate an already activated outlet');}this._activatedRoute = activatedRoute;const snapshot = activatedRoute._futureSnapshot;const component = snapshot.routeConfig.component;resolver = resolver || this.resolver;const factory = resolver.resolveComponentFactory(component);const childContexts = this.parentContexts.getOrCreateContext(this.name).children;const injector = new OutletInjector(activatedRoute, childContexts, this.location.injector);this.activated = this.location.createComponent(factory, this.location.length, injector);// Calling `markForCheck` to make sure we will run the change detection when the// `RouterOutlet` is inside a `ChangeDetectionStrategy.OnPush` component.this.changeDetector.markForCheck();this.activateEvents.emit(this.activated.instance);}

Component factory：

Component創建成功之后，添加到router-outlet對應的container里：

insert操作調用nativeInsertBefore，最終調用DOM元素原生的insertBefore方法，將待顯示的Component對應的selector，加入到router-outlet所在的container里去：

最后的效果：

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

總結

以上是生活随笔為你收集整理的SAP Spartacus list view里router-outlet的填充逻辑的全部內容，希望文章能夠幫你解決所遇到的問題。

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