天天看點

SAP Spartacus list view裡router-outlet的填充邏輯

當我點選某個cost center的hyperlink後:

SAP Spartacus list view裡router-outlet的填充邏輯

觸發router.js裡的activate方法:

SAP Spartacus list view裡router-outlet的填充邏輯

在_activatedRoute裡,能看到被激活,待顯示的Component是AppComponent:

SAP Spartacus list view裡router-outlet的填充邏輯

router.js裡和建立被激活Component相關的代碼:

SAP Spartacus list view裡router-outlet的填充邏輯

Component factory:

SAP Spartacus list view裡router-outlet的填充邏輯

Component建立成功之後,添加到router-outlet對應的container裡:

SAP Spartacus list view裡router-outlet的填充邏輯

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

SAP Spartacus list view裡router-outlet的填充邏輯
SAP Spartacus list view裡router-outlet的填充邏輯

最後的效果:

SAP Spartacus list view裡router-outlet的填充邏輯

繼續閱讀