代码之家 › 专栏 › 技术社区 › DaveC426913

传递变量到嵌套组件

angular

0

DaveC426913 · 技术社区 · 6 年前

一定有更优雅的方式。

我只是将这个布尔标记从页面标记传递到子组件:

<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课,但我似乎找不到正确的语法。我尝试了各种引号和括号的组合:

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

等。

2 回复 | 直到 6 年前

1

SiddAjmera 6 年前

您的实现存在一些问题。这个 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 为了你的食物。

2

0

TheParam sejmy 6 年前

要访问类变量,需要属性angular的绑定语法

[class.class-name] = "classVariableName"

所以在你的情况下,像下面这样绑定

[class.flushToText] = "flushToText"