0

必须有一种更优雅的方式来做到这一点。

我很简单；将此布尔标志从页面标记传递到子组件：

<span *ngIf="flushToText">
    <span 
        class="icon flushToText" 
        [title]="tooltip" >
    </span> 
</span>
<span *ngIf="!flushToText">
    <span 
        class="icon" 
        [title]="tooltip">
    </span> 
</span>

本质上，这表示：如果 flushToText 为 TRUE，则添加类 flushToText。

（这是调用它的标记：）

    <app-td-label 
            id="industry" 
            tooltip="Enter key words" 
            bold="true"
            flushToText="true">
    </app-td-label>

我尝试了 ng-class，但我似乎无法获得正确的语法。我尝试了引号和括号的每种组合：

        ng-class="flushToText: flushToText"
        ng-class="'flushToText': flushToText"
        ng-class="{'flushToText': flushToText==true}"

等等

4

2 回答 2

1

您的实施存在一些问题。这ng-class是 AngularJS(1.x) 语法，不适用于 Angular(2+)。

Angular 中的语法已更改为：

<span 
  class="icon"
  [class.flushToText]="flushToText">
  {{ tooltip }}
</span>

或者，你也可以使用这个：

<span 
  class="icon"
  [ngClass]="{ 'flushToText': flushToText }">
  {{ tooltip }}
</span>

这是您参考的工作示例 StackBlitz。

于 2019-02-07T16:11:40.593 回答
0

要访问类变量，您需要 Angular 的属性绑定语法

[class.class-name] = "classVariableName"

所以在你的情况下绑定如下

[class.flushToText] = "flushToText"
于 2019-02-07T15:49:55.307 回答