Question

我有一个CSS代码，如下所示：

:host >>> a.ng2-smart-sort-link.sort::after {
    content: '';
    right: 0.75rem;
    position: absolute;
    display: inline-block;
    width: 0;
    height: 0;
    border-bottom-color: #1a2138;
    border-bottom: solid rgba(0, 0, 0, .3);
    border-left: solid transparent;
    border-right: solid transparent;
    border-width: 0.375rem;
    margin-bottom: 2px;
    top: 50%;
    -webkit-transform: translate(0, -50%) rotate(180deg);
    transform: translate(0, -50%) rotate(180deg);
  }

 a.sort.asc::after {
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
 }

 <ng2-smart-table [ngClass]="{class: settings.columns.device.showSortIcon == true}"></ng2-smart-table>

如果条件为真，如何在CSS中实现一个类以与ngClass一起使用以显示此CSS？

Answer 1

尝试一下：

Img

Answer 2

使用className切换CSS类。如果您的CSS类名称为class，则：

<ng2-smart-table [className.class]="{!!settings.columns.device.showSortIcon }"</ng2-smart-table>

或角度指令ngClass：

<ng2-smart-table [ngClass]="{'class': !!settings.columns.device.showSortIcon }"</ng2-smart-table>

当我只有一个条件课程时，我倾向于使用className。

Answer 3

ngClass指令会将类添加到其自身的元素中，因此类选择器将像这样

:host >>> component-tag.calss .. {
  // something magical will happen ?‍♂️?
}

ngClass 类将添加条件为true的类基础

作为示例，请考虑

模板

<app-title [ngClass]="{'blue-text' : color === 'blue', 'green-text' : color == 'green'}">
</app-title>

样式

:host >>> app-title.blue-text p {
  color: blue
}
:host >>> app-title.green-text p {
  color: green
}

demo ??

如何在CSS中使用ngClass？

3 个答案: