SAP Spartacus list view里router-outlet的填充逻辑

当我点击某个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的填充逻辑相关推荐

SAP Spartacus list view里注释掉router-outlet的后果
如下图所示,如果注释掉ListComponent模板文件里的cx-split-view里的router-outlet: 则split view点击后,无法进入明细页面: router-outlet相当 ...
SAP Spartacus split view里每个元素宽度的计算方式
cx-split-view作为cx-view的容器,需要加上display: flex的属性: cx-view的flex属性为1 0 和一个calc函数的返回值.这个返回值作为flex-basis的值 ...
如何在SAP Spartacus category 页面里拿到当前的category信息
需求 https://stackoverflow.com/questions/59950572/how-to-access-the-current-categorydata-in-a-category ...
SAP Spartacus cxOutlet 里的 templatesRefs 的填充逻辑
cxOutlet合集 SAP Spartacus自定义指令cxOutlet的工作原理 SAP Spartacus table cell如何通过cxOutlet在运行时动态注入组件 SAP Sparta ...
SAP Spartacus 从 Ngrx 里获取 navigation 的实时状态
我们打开SAP Spartacus首页时,在Chrome开发者工具里能观察到cx-storefront节点,即带有LoginPageTemplate class的自定义节点,class在start-n ...
SAP Spartacus index.html里的meta标签
meta标签用来描述页面的元数据. 我把index.htmll里的meta标签注释掉,仍然能够正常工作,这是为什么呢? 后台url维护在Environment.occBaseUrl字段里: 注入Con ...
如何找到SAP Spartacus UI可以扩展的outlet
Spartacus两种outlet: CMS data driven outlet software driven outlet 文件位置: C:\Code\SPA\spartacus\project ...
SAP ABAP CDS view 里 INNER JOIN 和 Association 的区别
最近有朋友在我的知识星球里向我提问,SAP ABAP CDS view 的 INNER JOIN 和 Association 的功能可以理解为一样吗? (关于加入我的知识星球的方式,请移步本文文末) ...
SAP Spartacus 当购物车里添加的商品个数过多后引起的性能问题以及解决方案
问题:https://github.com/SAP/spartacus/issues/10379 解决方案:https://github.com/SAP/spartacus/pull/10865/fi ...

SAP Spartacus list view里router-outlet的填充逻辑

SAP Spartacus list view里router-outlet的填充逻辑相关推荐

最新文章

热门文章