Question

我目前正在开发一个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的新手，所以非常感谢任何提示或帮助！

Answer 1

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

像： * .TS

public changedClass = "class1";

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

* .html（模板）

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

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

Answer 2

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

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

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

2 个答案: