根据 angular2 打字稿中的 属性 值分配 class

Question

我想根据 angular2 中的 属性 在 html 上分配 classes。那是我尝试在不使用 jquery 和 bootstrap

的情况下打开下拉列表

所以我有

<li
  class="dropdown mega-menu mega-menu-wide"

  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

在我的 ts 我有

export class ... {
  propertyval :null


   toggle(val){
    this.propertyval = null;
   }
  }

所以现在如果 属性val 的值为 admin，我想将 open 的 class 分配给列表，否则它应该为 null

我该怎么做

Answer 1

您可以使用 属性 绑定来动态添加 class。

<li
  class="dropdown mega-menu mega-menu-wide"
  [class.WhateverYouWant]="propertyval === 'admin'"
  //stuck at adding class of open if propertyval is admin
  >  
 <a #admin class="dropdown-toggle" (click)="toggle(admin)" >Administrative</a>
</li>

Answer 2

您可以使用 NgClass 指令：

<li [ngClass]="{'class-open': open}">  
  <a #admin class="dropdown-toggle" (click)="open = !open;" >Administrative</a>
</li>

class-open - 是影响下拉列表的 class。 open 是您最初在组件中设置为 false 或 true 的变量，因此不需要 toggle() 方法。

Answer 3

在您的 class 上创建一个 getter，返回 属性 状态的布尔值。

get propertyHasValue(): boolean {
  return !isNullOrUndefined(this.propertyval);
}

然后向您的元素添加一个 ng-class 指令

<a [ng-class]="{ 'open': propertyHasValue }"/>

Answer 4

您好，您可以使用 [ngClass] 添加动态样式。

<a #admin class="dropdown-toggle" (click)="toggle(admin)"  [ngClass]="{'dynStyle': isAdmin }" >Administrative</a>

//风格

.dynStyle{
  color:green;
}

//.ts

       toggle(val){
        if(val!='admin') 
        {
            this.propertyval = null;
          return isAdmin=false
           }
         else

    {
    return isAdmin=true;
    }
}