Question

这是我的代码示例。在我的情况下，切换类适用于每个li元素

   <ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav" class="presentation" (click)="active = !active" [ngClass]="toggleClass()">
            <a href="#">{{x.menu}} </a>
        </li>
    </ul>

JS

 export class AppComponent {
  active = false;
  nav = NAVIGATION;

  //Toggle Class

  toggleClass(){
    if(this.active){
      return 'active';
    } else {
      return '';
    }
  }

Answer 1

使用以下代码，您不需要编写打字稿代码，

<ul class="nav nav-pills pull-right">
        <li *ngFor="let x of nav;let i=index" 
             class="presentation" 
             (click)="isClicked=i"             
             [class.active]="isClicked==i">    
             <a href="#">{{x.menu}}</a>
        </li>
</ul>

Answer 2

您可以制作指令并使用@HostBinding

示例

import { Directive, ElementRef, HostBinding } from '@angular/core';

@Directive({
    selector: '[my-directive]'
})

export class MyDirective {
    @HostBinding('class.active') isActive = false;

    toggle() {
        this.isActive = !this.isActive;
    }

}

像这样使用：

<li [my-directive] (click)="toggle()">blah</li>

Answer 3

您应该为每个项目存储活动变量，而不是整个组件存储所有li：

<li *ngFor="let x of nav" (click)="x.active = !x.active" ... >

您可以在模板中使用以下代码来显示活动类：

[class.active]="x.active"

Answer 4

您必须在导航界面/类中添加active属性：

<ul class="nav nav-pills pull-right">
   <li *ngFor="let x of nav" 
       class="presentation" 
       (click)="nav.active = !nav.active" 
       [class.active]="nav.active"
   >
      <a href="#">{{x.menu}} </a>
   </li>
</ul>

但是看到你正试图选择导航项目，我猜你只想选择一个。您必须将模板更改为以下内容：

<ul class="nav nav-pills pull-right">
   <li *ngFor="let x of nav" 
       class="presentation" 
       (click)="active = x" 
       [class.active]="x === active"
   >
      <a href="#">{{x.menu}} </a>
   </li>
</ul>

在您的组件中，您应该将active声明从boolean更改为导航项目类/界面/任何

Answer 5

您可以将指令的HostListener用作纯

export class MyDirective {
@HostBinding('class.active') isActive = false;

@HostListener('click', ['$event'])
onClick(e) {
   this.isActive = !this.isActive;
}
}

并使用html

<li [my-directive]>blah</li>

如何仅切换类当前元素angular2

5 个答案: