Question

我在Angular 2中有一个名为selectedState的表达式。表达式求值为const内部的五个属性之一。根据单击的内容，它会更改类名。

                    <button
                        class="button button--secondary"
                        [ngClass]="selectedState">
                        <div class="u-maxX u-centerX">
                            <span>Button</span>
                            </div>
                        </div>
                    </button>

“selectedState”将返回点击的项目;默认，is-hovering，is-active，禁用和加载。

e.g。如果我点击悬停它将返回

                    `<button
                        class="button button--secondary is-hovering">
                        <div class="u-maxX u-centerX">
                            <span>Button</span>
                            </div>
                        </div>
                    </button>`

现在当我改变语法时。

                    <button
                        class="button button--primary"
                        [ngClass]="{selectedState: type === 'primary'}">
                        <div class="u-maxX u-centerX">
                            <span>Button</span>

                        </div>
                    </button>

现在，“selectedState”计算为字符串“selectedState”，而不是像以前一样动态变化。检查类型==='primary'时如何保持动态行为？我需要检查类型，因为页面上有几种类型。我需要每种类型只影响一个按钮，否则它会影响页面上的所有按钮。

Answer 1

您应该尽可能多地保留模板中的逻辑，因此要么绑定[ngClass]="someVariable"并通过调用函数来改变该变量，要么绑定[ngClass]="someFunction()"并让该函数返回基于的相应类名一些条件。

例如，有一个调用setIsHovering函数的按钮，另一个调用setIsActive函数等的按钮，然后定义这些函数：

setIsActive() {
    this.selectedState = "isActive";
}

setIsHovering() {
    this.selectedState = "isHovering";
}

并将ngClass定义为：

[ngClass]="selectedState"

或者，定义selectedState函数：

selectedState() {
    if(this.isHoveringStateVariable == true) {
         this.selectedState = "isHovering";
    } else if (this.isActiveStateVariable == true) {
          this.selectedState = "isActive";
    }
}

并将ngClass定义为：

[ngClass]="selectedState()"

显然用适合确定实际当前状态的逻辑替换this.isHoveringStateVariable。

Angular 2 ngClass在检查条件时不评估我的表达式

1 个答案: