首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Angular2+:在多个div中切换元素

Angular2+:在多个div中切换元素
EN

Stack Overflow用户
提问于 2018-08-15 12:26:28
回答 2查看 88关注 0票数 1

我有多个带有切换<i>元素的div。然而,在我的尝试中,当我点击一个div的书签(即fa-<i>)时,它会切换所有其他div对应的<i>

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

我的HTML:

代码语言:javascript
复制
   <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:

代码语言:javascript
复制
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;
  }
}
EN

回答 2

Stack Overflow用户

发布于 2018-08-15 12:36:46

您可以在一个div中使用

代码语言:javascript
复制
[hidden]="flag"

和其他div中

代码语言:javascript
复制
[hidden]="!flag"

并创建一个单击事件

代码语言:javascript
复制
 <i class="fal fa-bookmark" (click)="flagActive()"></i> 

你的函数看起来像这样

代码语言:javascript
复制
function flagActive(){
 this.flag = !this.flag
}
票数 0
EN

Stack Overflow用户

发布于 2018-08-16 10:09:20

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

代码语言:javascript
复制
@Directive({
  selector: '[appToggle]',
  exportAs:'appToggle'
})
export class ToggleDirective {
  toggle:boolean=false;
  constructor() { }

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

}

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

代码语言:javascript
复制
<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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51852946

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档