如何将 ngClass 与 css 一起使用？答案

【问题标题】：How to use ngClass with css?如何将 ngClass 与 css 一起使用？
【发布时间】：2019-08-01 12:14:20
【问题描述】：

我有一个如下所示的 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%);
 }

 &lt;ng2-smart-table [ngClass]="{class: settings.columns.device.showSortIcon == true}"&gt;&lt;/ng2-smart-table&gt;

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

【问题讨论】：

你检查过任何答案吗？ ??????????

标签： angular ng-class

【解决方案1】：

试试这个：

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

【讨论】：

【解决方案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。

【讨论】：

【解决方案3】：

ngClass 指令将类添加到它自己的元素中，因此类选择器将是这样的

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

ngClass 类将添加条件为真的类基

作为一个例子考虑这个

模板

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

【讨论】：

它不起作用（这是我所做的更改[ngClass]="{'sort' : settings.columns.device.showSortIcon === true}"）。如果条件为真（在打字稿中），我想执行 css 代码以在表的标题上显示排序箭头。但是，如果我将 typescript 中的条件更改为 false，它也会显示图标。
你试过这样:host >>> ng2-smart-table.sort a.ng2-smart-sort-link.sort::after {} 吗？与我们分享样式文件@mihai003