例子:我新建了一个AppComponent,映射到了ManageCostCentersListComponent:

运行时的效果:

这个AppComponent对应的app-root是如何被添加到DOM tree里的呢?

Component渲染的起点是component-wrapper.directive.ts的launchComponent方法:

createComponent里的insert操作,最后会导致刚刚创建出来的Component对应的dom节点添加到dom tree里:

nativeInsertBefore:

更多Jerry的原创文章,尽在:“汪子熙”:

SAP Spartacus page slot里的Component,对应的DOM节点是如何插入到DOM tree里的相关推荐

  1. SAP Commerce Cloud WCMS 里的 home 页面和 SAP Spartacus Page API 返回的数据比较

    You can only create new components in the WCMS Page View perspective. In the Live Edit perspective, ...

  2. SAP Spartacus Page Layout - 页面布局设计

    Page Structure - 页面结构 Pages in CMS are constructed with slots and components. A page contains slots, ...

  3. SAP Spartacus Page Layout学习笔记

    文档地址: https://sap.github.io/spartacus-docs/page-layout/#outlet-position Spartacus is based on a sing ...

  4. SAP Spartacus B2B页面的List Component

    需求如下: 不管选择左边的view里列表行项目的哪一条,右边页面第一个可以被focus的元素,即Edit按钮,需要自动被focus: 如果像上图这样,将cxFocus直接施加到a标签页上,一个side ...

  5. SAP Spartacus B2B 页面的 Popup Component

    we'll make the name a link to save space, no "Details" word user clicks name and sees popo ...

  6. SAP Spartacus Component-wrapper.directive.ts launch Component的三个参数

    拿到Component mapping后,使用subscribe fire this.launchComponent这个方法: launcher的三个输入参数: componentMapping vi ...

  7. SAP Spartacus Breadcrumbs Component的显示问题讨论

    如果把Storefront.component.html里position为BottomHeaderSlot改成其他名称: 按照其注释写到: position是用于为指定的page slot定位CMS ...

  8. SAP Spartacus 的 cx-page-layout selector 介绍 - PageLayoutComponent

    在SAP Spartacus page的源代码里,能看到很多cx-page-layout的selector,如下图所示: 这些cx-page-layout不是Directive,而是Component ...

  9. SAP Spartacus 的 Above-the-Fold Loading 加载机制

    https://sap.github.io/spartacus-docs/above-the-fold/ Above-the-fold loading is a technique that prio ...

最新文章

  1. 【OfficeDIY】有了站点了 ^_^
  2. reid 数据集 行人重拾别
  3. linux开机和登陆欢迎信息
  4. LPVOID是一个没有类型的指针
  5. SQL中触发器实例讲解(转)
  6. Greenplum-概念篇
  7. Bootstrap 按钮下拉菜单
  8. 计算与推断思维 十二、为什么均值重要
  9. activiti 工作流_activiti-boot快速开发工作流框架
  10. 不知道先学工具还是方法,数据分析入错门,后悔一辈子
  11. update语句修改报错问题处理
  12. 存储基础知识(八):备份技术(上)
  13. Cannot uninstall ‘requests’. It is a distutils installed project and thus we cannot accurately deter
  14. Linux查看Chrome的版本号
  15. 汤家凤:可以跳过接力题典强化篇直接动手真题吗?
  16. Linux中Bin文件压缩包解压运行
  17. C. Multiples of Length 思维构造
  18. APP服务器与Web服务器的区别是什么?
  19. 微信小程序的前世今生
  20. 微信域名防封的方法以及技术原理

热门文章

  1. javascript-操作符
  2. TypeScript 学习一 参数,函数,析构表达式
  3. Docker 入门到实践笔记1
  4. Async Solr Queries in Python
  5. ubuntu下python thrift安装
  6. 转换字符串为json对象的方法
  7. Win-Get——Windows下的自由软件自动安装程序
  8. 尚硅谷_Ajax_学习笔记
  9. 第九章:Java_枚举类和注解
  10. javaScript执行环境、作用域链与闭包