Angular2：要素をクリックしたときのCSSクラスの設定とメンテナンス

Question

現在、Angular 2 Webアプリケーションで作業中です。ビューでは、アクティブな要素は、クリックすると追加の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) { }; 




    } 

このdoesn'tは大したように見えます。しかし、私はまだ適切な解決策を見つけられませんでした。クリックされる要素には、追加のCSSクラスが必要です。私がAngular2を初めて習得したときには、ヒントや助けをいただければ幸いです。

Answer 1

以下のように試すことができます。変数selectedUrlを使用してクリックしたURLを保存し、反復イメージと一致するかどうかを確認し、一致する場合はクラスactiveを設定します。

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

Answer 2

クリック機能の値を変更し、最終的に

などのclass属性の内側に使用し、コンポーネントのTSで新しい変数を作成してみてください：

public changedClass = "class1"; 

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

* .htmlを（ は* .TSテンプレート）

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

ここでは、クリックするとその要素のクラスを変更するコードがあります。