javascript - Angular 2 : Setting and maintaining a CSS class when clicking on an element

Question

我目前正在开发 Angular 2 网络应用程序。在 View 中，事件元素在单击时应该获得一个额外的 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 的新手，非常感谢任何提示或帮助!

Answer 1

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

喜欢: *.ts

public changedClass = "class1";

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

*.html(模板)

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

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