angular - 如何在 Angular 中通过不同的 div 有条件地包装元素

Question

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

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

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

我想找到最优雅、最有效的方式来以 Angular 方式做到这一点。谢谢

Answer 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>