SAP Spartacus Org Unit User List页面的设计原理

从cx-org-unit-user-list selector出发：

Component为UnitUserListComponent：

打开其html实现，里面又消费了cx-org-sub-list这个selector，同时a标签指定了actions属性：

cx-org-sub-list下面的这个a标签，渲染时不会直接出现在cx-org-sub-list下面，而是出现在cx-org-sub-list内部出现了ng-content select=actions的地方：

所以进入selector cx-org-sub-list的实现：sub-list.component.html, 这是一个shared Component：

打开sub-list.component.html，里面使用ng-content select=actions, 定义了可以动态注入UI的注入点：

上图能看到，cx-org-sub-list里的a actions会出现在selector cx-org-card的正下方。

再看cx-org-card的实现card.component.html：

看来所有的真实UI都位于
card.component.html定义的cx-view里：

上图actions class div内的a，实际是通过下面这个ng-content动态注入的：

为了验证这一点，我们可以做个实验：

运行时，果然发现create a标签页出现在拥有fairy class的div下面：

因此，最后处理issue，精力应集中在sub-list.component.html中的cx-table:

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

总结

以上是生活随笔为你收集整理的SAP Spartacus Org Unit User List页面的设计原理的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。