Question

必须有一种更优雅的方法。

我只是；将该布尔标志从页面标记传递到子组件：

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

等

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

这是您推荐的Working Sample StackBlitz。

Answer 2

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

[class.class-name] = "classVariableName"

因此，在您的情况下，请按以下方式绑定

[class.flushToText] = "flushToText"

传递变量到嵌套组件

2 个答案: