Angular2：单击元素时设置和维护CSS类答案

【问题标题】：Angular2: Setting and maintaining a CSS class when clicking on an elementAngular2：单击元素时设置和维护CSS类
【发布时间】：2017-07-04 03:43:27
【问题描述】：

我目前正在开发一个 Angular 2 webapp。在视图中，活动元素在单击时应该获得一个额外的 CSS 类。单击的元素需要获得一个额外的 CSS 类。添加包含自己的 CSS 类的 CSS 属性 ":active" 不起作用，因为当用户从鼠标按钮上移开手指时，该类被删除。 CSS 属性 ":focus" 根本不起作用。我尝试使用 Angular2 指令 Ng-click、ng-switch、ng-if 和 ng-class。到目前为止的代码 -

模板：

<footer>
<div class="thumbnail-slider">
    <div class="thumbnail-img-container">
        <img class="thumbnail-slider-img" (click)="getActualImage(url)" 
            *ngFor="let url of urls" [src]="url"/>
    </div>
</div>
</footer>

组件：

    import { Component, NgModule, Input, Output, ViewChild, EventEmitter, ElementRef, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
    import { BrowserModule, DomSanitizer, SafeUrl } from '@angular/platform-browser';
    import { Http, Response, ResponseContentType } from '@angular/http';

 ReqConstImages } from '../../services';
    import { Subscription } from 'rxjs/Subscription';
    import { Subject } from 'rxjs/Subject';
    import { ObservableUtility } from '../../helper/index';
    import { trigger, state, style, transition, animate } from '@angular/animations';


    let css: any = require('!raw-loader!less-loader!./thumbnail-slider.less');

    @Component({
      selector: 'thumbnail-slider',
      templateUrl: 'thumbnail-slider.html',
      styleUrls: [css],
      animations: [
      trigger('click', [
        state('inactive', style({
          border: '5px yellow solid'
        })),
        state('active',   style({
          border: '6px green solid'
        }))
      ])
    ]

    })

    export class ThumbnailSliderComponent implements OnInit, AfterViewInit, OnDestroy {


      constructor(private http: Http, private sanitizer: DomSanitizer, private observableUtility: ObservableUtility) { };




    }

这似乎没什么大不了的；但是，我还没有找到正确的解决方案。点击的元素只需要一个额外的 CSS 类。由于我是 Angular2 的新手，非常感谢任何提示或帮助！

【问题讨论】：

您可以尝试[class.active]="isActive" [class.inactive]="!isActive" 并在函数中切换isActive。还将 CSS 类移动到组件的样式。或提供默认 css 并使用 active 或 inactive 作为替代。
这个问题也不是很清楚......你想要应用新类的多少元素。 ?是一次吗，比如说一旦您单击该元素，就会应用该类，并且应该对每个元素都保持应用。 ?您提供的 HTML 中的哪个元素是您的目标？
@redflar3：仅对于一个元素 - thumbnail-slider-img - css 类应保持应用，直到用户单击缩略图滑块中的另一张图像。基本上，它是一个缩略图滑块，其中选择了活动图像。它应该保持应用。这能回答你的问题吗？

标签： javascript html css angular

【解决方案1】：

尝试在组件 ts 中创建一个新变量，更改 clicked 函数中的值，最后在类属性中使用

喜欢： *.ts

public changedClass = "class1";

onClickedItem(){
    this.changedClass = "class2";
}

*.html（模板）

<div class="{{changedClass}}" (click)="onClickedItem()"></div>

这里有一个代码，可以在单击元素时更改元素中的类。

【讨论】：

【解决方案2】：

您可以尝试以下方法。使用变量selectedUrl来存储点击的URL，检查它是否匹配迭代图像，如果匹配，则设置类active。

  <img 
       class="thumbnail-slider-img" 
       *ngFor="let url of urls"
       [src]="url"
       (click)="selectedUrl=url"
       [class.active]="selectedUrl === url"/>

【讨论】：