angular - 在 Angular 中多次嵌入一个组件?
问题描述
我想实现以下目标:
<s-panel-edicion>
<s-barra-lateral posicion="right" icono="fa fa-cog" [animar]="true">cualquier contenido</s-barra-lateral>
<s-barra-lateral posicion="left" icono="fa fa-cog" [animar]="true">cualquier contenido </s-barra-lateral>
</s-panel-edicion>
左右是侧边栏的位置,这是我的编辑组件:
<div class="container-plantilla">
<div class="plantilla-template" [ngStyle]="moverBarraLeft">
<ng-content select="s-barra-lateral"></ng-content>
</div>
<div class="plantilla-contenido" [ngClass]="{'plantilla-contenido-oculto':!displayLeft,'plantilla-contenido-no-oculto':displayLeft,'plantilla-contenido-full':displayLeft}">
<ng-content select="s-contenido"></ng-content>
</div>
<div class="plantilla-template" [ngStyle]="moverBarraRight">
<ng-content select="s-barra-lateral"></ng-content>
</div>
</div>
仅显示一侧。有人可以指导我如何实现这一目标吗?我会感谢你的帮助。
(我的英文不好,谢谢)
解决方案
如果我正确理解您的要求,您需要按以下方式使用“选择”:
select="[name]"
,然后您可以在任何标签中使用“名称”。
您的 html 将如下所示:
<s-panel-edicion>
<s-barra-lateral content1 posicion="right" icono="fa fa-cog" [animar]="true"> cualquier contenido</s-barra-lateral>
<s-barra-lateral content3 posicion="left" icono="fa fa-cog" [animar]="true">cualquier contenido </s-barra-lateral>
</s-panel-edicion>
s-panel-edicion:
<div class="container-plantilla">
<div class="plantilla-template" [ngStyle]="moverBarraLeft">
<ng-content select="[content1]"></ng-content>
</div>
<div class="plantilla-contenido" [ngClass]="{'plantilla-contenido-oculto':!displayLeft,'plantilla-contenido-no-oculto':displayLeft,'plantilla-contenido-full':displayLeft}">
<ng-content select="[content2]"></ng-content>
</div>
<div class="plantilla-template" [ngStyle]="moverBarraRight">
<ng-content select="[content3]"></ng-content>
</div>
</div>
循环示例
<s-panel-edicion>
<div *ngFor="let item of items">
<s-barra-lateral *ngIf="item.posicion == 'right'" content1 posicion="right" icono="fa fa-cog" [animar]="true"> cualquier contenido</s-barra-lateral>
<s-barra-lateral *ngIf="item.posicion == 'left'" content3 posicion="left" icono="fa fa-cog" [animar]="true"> cualquier contenido</s-barra-lateral>
</div>
</s-panel-edicion>
推荐阅读
- forms - Symfony - 需要的个人递归函数 = true 返回 false
- java - Guage 测试自动化框架是否允许在同一个 repo 中使用多种语言?
- python - 如何检查图像切片中是否有 5 个或 6 个复选框?
- selenium - Jenkins Xvfb libcrypto 问题
- laravel - Laravel Nova 模板自定义
- authentication - 如何在创建新用户时修复用户验证插件中的错误?
- asp.net - 为什么请求不会超时?
- java - Why am I getting wrong result with java.sql.Date and PreparedStatement?
- android - 弹出菜单正在累积出现次数(未正确关闭)
- r - Access keyboard buffer in R