如何在cx-slots周围添加容器

Question

我试图找出如何结构我的代码在一种方式，我希望它是为样式的目的，但它似乎有限，我尝试使用layoutConfig，但从我的订单，没有指定你想要的内容槽，而不是在哪个顺序和什么应该呈现特定的模板。

我看到你可以使用所谓的outletRef，这对我来说是完美的，因为我可以做这样的事情

<ng-template cxOutletRef="HomePage2018Template">
<div class="header-container">
//inject the slots where i want
</div>
</ng-template>

，这将使我能够以任何给定的方式构建代码的html，但从我对OutletRef的理解来看，你失去了在smartedit中编辑插槽的能力，这将是一个问题。

目前我所做的实现是与ConfigModule和我映射我的角组件到组件的typeCode，然后在app.component.html我只有

我如何包装容器周围的任何给定的插槽?

https://i.stack.imgur.com/IJ0QQ.png

Answer 1

你可以用你自己的模板创建一个自定义组件，你可以使用cx-page-slot组件在你自己的HTML中放置插槽，如下所示:

<div class="stories">
<cx-page-slot position="Tile1"></cx-page-slot>
<cx-page-slot position="Tile2"></cx-page-slot>
<cx-page-slot position="Tile3"></cx-page-slot>
<cx-page-slot position="Tile4"></cx-page-slot>
<cx-page-slot position="Tile5"></cx-page-slot>
<cx-page-slot position="Tile6"></cx-page-slot>
<cx-page-slot position="Tile7"></cx-page-slot>
<cx-page-slot position="Tile8"></cx-page-slot>
</div>
<cx-page-slot position="Content"></cx-page-slot>
<cx-page-slot position="Teaser"></cx-page-slot>
<cx-page-slot position="SocialMedia"></cx-page-slot>

在你的路由配置中你必须使用CmsPageGuard，当你点击此路由时，它将从后端获取页面配置。

例如:

@NgModule({
declarations: [HomePageComponent],
imports: [
PageSlotModule,
RouterModule.forChild([
{
path: '',
component: HomePageComponent,
canActivate: [CmsPageGuard],
},
]),
],
})
export class HomePageModule {}