如何与CSS一起使用NGCLASS

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>

如果条件为TRUE，我如何在CSS中实现CSS中的类以显示此CSS？

Answer 1

使用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 2

尝试以下：

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

Answer 3

ngclass指令将将类添加到it it it it exp expely元素中，因此类选择器将像这样

: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
}

演示