如何在Angular中有条件地用不同的div包装元素

Posted 2023-02-22

【中文标题】如何在Angular中有条件地用不同的div包装元素

【英文标题】：How to wrap a element by different div conditionally in Angular

【发布时间】：2020-11-06 19:40:14

【问题描述】：

假设我有一个元素树，我想根据条件将它包装在不同的 div 中 例如。

//condition == 1
<div class="condition1" condition1Directive>
   <div> ... </div>   //same content
</div>

//condition == 2
<div class="condition2">
   <div> ... </div>   //same content
</div>

我想在 Angular 中找到最优雅、最有效的方法。 谢谢

【问题讨论】：

只是包装div的类属性发生变化还是可以是任何其他元素？

没有。我已经更新了我的问题。我想有一些特别是 div 的指令。

您是说如果condition1 使用一个指令，如果condition2 使用另一个指令？对你的最终目标有点困惑。我认为*ngIf 是你想要的，但我不太清楚你想要达到什么目的。

我的实际情况是在条件1中使用指令，在条件2中没有指令

这是一个有趣的问题。你能详细解释一下，这两个条件是什么？为什么只通过指令？你最终的确切结果是什么？

【参考方案1】：

如果您只想将具有不同样式属性的 div 包含在内，您可以使用 ngClass

<div [ngClass]="'condition1': condition === 1, 'condition2': condition === 2"> 


<div> ... </div>   //same content

</div>

对于使用条件指令，您可以执行以下操作：

 <ng-container *ngTemplateOutlet="condition1 === true ? template1 : template2">

<ng-template #template1 directive> <ng-template>

<ng-template #template2></ng-template>

【讨论】：

对不起，我应该更清楚我的问题。我已经更新了它，实际上我想有一些特别是 div 的指令。

【参考方案2】：

对父 div 使用 *ngIf，如有必要，将相同的内容 div 提取到 ng-template 或组件中。

您可以查看此线程以获取更多详细信息：

Apply a directive conditionally

<div *ngIf="isCondition1" condition1Directive>
  <sameContentComponent></sameContentComponent>
</ng-container>

<div *ngIf="!isCondition1">
  <sameContentComponent></sameContentComponent>
</ng-container>

【参考方案3】：

你可以这样做..

案例 1

<div *ngIf="condition1" class="condition1" condition1Directive>
   <div> ... </div>   //same content
</div>

<div *ngIf="condition2" class="condition2">
   <div> ... </div>   //same content
</div>

案例 2

<div [ngClass]="condition1 == true ? 'condition1' : 'condition2'" condition1Directive>
   <div> ... </div>   //same content
</div>