Question

我想基于bool属性设置div的样式＆＃34; isActive＆＃34;在我的控制器上。这是否可以用角度？

<div class="col-md-3" (click)="isActive = !isActive">
    <div class="center">
        <i class="fa fa-calendar"></i><br>
        <span>Activate</span>
    </div>
</div>

Answer 1

是的，可以考虑使用属性指令。例如，要根据某个布尔值将某个类应用于div，请在div中使用以下语法： div [class.some_class]="isActive"。

如果您想根据某些值选择内容，请考虑使用*ngIf结构指令（或ngSwitch）。例如 <div> <h1 *ngIf="isActive">I'm ActiveM</h1> </div>

在此处阅读更多内容：https://angular.io/guide/attribute-directives

此外，如果您有一些类的列表和对应的布尔值，用于定义是否在控制器样式中使用该类，则使用以下命令：

ts文件中的

：

this.currentClasses =  {
    'saveable': this.canSave,
    'modified': !this.isUnchanged,
    'special':  this.isSpecial
  };

模板文件中的

使用ngClass：

<div [ngClass]="currentClasses">This div is initially saveable, unchanged, and special</div>

代码来自：https://angular.io/guide/template-syntax#ngclass

Answer 2

使用条件类：

<div class="col-md-3" (click)="isActive = !isActive">
    <div class="center">
        <i class="fa fa-calendar"></i><br>
        <span [class]="isActive? 'classA': 'classB'">Activate</span>
    </div>
</div>

角度：基于属性的风格

2 个答案: