Question

我有多个div，它们具有切换<i>元素。但是，当我尝试单击一个div的<i>（即 fa-bookmark ）时，它会切换其他div对应的所有<i>。

我想要的是能够在每个单独的div中切换<i>并且不影响其他div。

我的HTML：

   <div class="crit-desc crit-item-flags order-item-flags">
        <i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
        <i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
    </div>
/*Repeat above HTML*/
    <div class="crit-desc crit-item-flags order-item-flags">
        <i class="fal fa-bookmark" (click)="flagActive('bookmark')" [ngClass]="items['bookmark'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
        <i class="fal fa-alarm-clock" (click)="flagActive('alarmClock')" [ngClass]="items['alarmClock'].flagStatus ? 'flagActive' : 'flagNotActive'"></i>
    </div>

我的TS：

export class FlagsComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }
  items = {
    'flag': { flagStatus: false },
    'bookmark': { flagStatus: false },
    'alarmClock': { flagStatus: false }
  };
  flagActive(item) {
    console.log(this.items[item]);
    this.items[item].flagStatus = !this.items[item].flagStatus;
  }
}

Answer 1

您可以在一个div中使用

[hidden]="flag"

和其他div

[hidden]="!flag"

并进行点击事件

 <i class="fal fa-bookmark" (click)="flagActive()"></i>

您的函数看起来像

function flagActive(){
 this.flag = !this.flag
}

Answer 2

如果要重复Div，请使用指令

@Directive({
  selector: '[appToggle]',
  exportAs:'appToggle'
})
export class ToggleDirective {
  toggle:boolean=false;
  constructor() { }

  @HostListener('click') onClick(){
     this.toggle=!this.toggle;
  }

}

然后对不同的div使用不同的模板变量

<div class="crit-desc crit-item-flags order-item-flags">
        <i class="fa fa-bookmark" 
        appToggle
        #bookmark="appToggle"       
         [ngClass]="bookmark.toggle === true ? 'flagActive' : 'flagNotActive'"></i>
        <i class="fa fa-clock-o"          
        appToggle
        #alarm="appToggle"      
         [ngClass]="alarm.toggle === true ? 'flagActive' : 'flagNotActive'"       
        ></i>
    </div>

    {{bookmark | json}}
    {{alarm | json}}

/*Repeat above HTML*/
    <div class="crit-desc crit-item-flags order-item-flags">
        <i class="fa fa-bookmark" 
        appToggle
        #bookmark1="appToggle"         
         [ngClass]="bookmark1.toggle === true ? 'flagActive' : 'flagNotActive'"></i>  
        <i class="fa fa-clock-o"           
        appToggle
        #alarm1="appToggle"       
         [ngClass]="alarm1.toggle === true ? 'flagActive' : 'flagNotActive'"         
        ></i>
    </div>

    {{bookmark1 | json}}
    {{alarm1 | json}}

示例：https://stackblitz.com/edit/stackoveflow-toggle-div

Angular2 +：在多个div中切换元素

2 个答案: