Dodaj klasę do elementu w Angular 4

Question

Próbowałem utworzyć galerię obrazów za pomocą Angular 4. Logika za tym polega na dodaniu klasy Cascaded Style Sheet (CSS) do wybranego obrazu, który pokaże czerwoną ramkę wybrany (kliknięty) obraz. Jest to plik kaskadowego arkusza stylów (CSS) dla galerii obrazów.

Chcę pokazać czerwony kwadrat wyboru na obrazku, który kliknąłem. "To jest klasa" należy dodać do wybranego obrazu.

  #container{ 
       border:1px solid red; 
       height:auto; 
      } 
      ul li{ 
       margin-right:20px; 
       margin-left:0; 
       list-style-type:none; 
       display:inline; 
      } 
      ul li img{ 
       width: 200px; 
       height:200px; 
       border:1px solid grey; 
      } 

      #select{ 
       border:2px solid violet; 
      } 
      .this-is-a-class{ 
       border: 10px solid red !important; 
      } 

Poniżej znajduje się kod HTML

  <div id="container"> 
       <ul> 
        <li><img class="this-is-a-class" id="1" src="../../assets/images/1.jpg" (click)="addClass(id=1)"/></li> 
        <li><img id="select" src="../../assets/images/2.png" (click)="addClass(id=2)"/></li> 
        <li><img id="3" src="../../assets/images/3.jpg" (click)="addClass(id=3)"/></li> 
        <li><img id="4" src="../../assets/images/4.png" (click)="addClass(id=4)"/></li> 
        <li><img id="5" src="../../assets/images/5.jpg" (click)="addClass(id=5)"/></li> 

       </ul> 
      </div> 
      <div> 
      <h1>You Clicked on: {{id}}</h1> 
      </div> 

Kod maszynopis jest następujący

 import { Component, OnInit } from '@angular/core'; 
     import { DataService } from '../../services/data.service'; 
     @Component({ 
     selector: 'app-user', 
     templateUrl: './user.component.html', 
     styleUrls: ['./user.component.css'] 
     }) 
     export class UserComponent implements OnInit { 
     id: number; 
     constructor() { 
     console.log("Constructor working..") 

     } 

     ngOnInit() { 
     console.log('ngOnInit works..'); 


     } 
//function to add the class to selected image to show the border. 
     addClass(id) { 
     this.id = id; 
     //id = this.id? 'selectedImg' : 'null'; 

     } 

    } 

Answer 1

Korzystając [ngClass] i warunkowo zastosować klasę na podstawie identyfikatora

W swojej Html

<li><img [ngClass]="{'this-is-a-class': id === 1 }" id="1" src="../../assets/images/1.jpg" (click)="addClass(id=1)"/></li> 

<li><img [ngClass]="{'this-is-a-class': id === 2 }" id="2" src="../../assets/images/2.png" (click)="addClass(id=2)"/></li> 

w pliku

addClass(id: any) { 

    this.id = id; 
    } 

Answer 2

Tutaj ts jest plunker pokazując, jak można go używać z dyrektywą ngClass.

Demonstruje się przy użyciu div s zamiast img s.

Szablon:

<ul> 
     <li><div [ngClass]="{'this-is-a-class': selectedIndex == 1}" (click)="setSelected(1)"> </div></li> 
     <li><div [ngClass]="{'this-is-a-class': selectedIndex == 2}" (click)="setSelected(2)"> </div></li> 
     <li><div [ngClass]="{'this-is-a-class': selectedIndex == 3}" (click)="setSelected(3)"> </div></li> 
</ul> 

TS:

export class App { 
    selectedIndex = -1; 

    setSelected(id: number) { 
    this.selectedIndex = id; 
    } 
} 

Answer 3

można spróbować to bez skryptu java można to zrobić tylko za pomocą CSS

img:active, 
img:focus, 
img:hover{ 
border: 10px solid red !important 
} 

od tego, czy sprawa jest aby dodać dowolną inną klasę css, możesz użyć selektora zapytań, takiego jak

<img id="image1" ng-click="changeClass(id)" > 
<img id="image2" ng-click="changeClass(id)" > 
<img id="image3" ng-click="changeClass(id)" > 
<img id="image3" ng-click="changeClass(id)" > 

kontroler najpierw wyszukać dowolny obraz z czerwonym obramowaniem i usunąć go następnie przez przepuszczenie Image ID dodać klasę graniczną do tego obrazu

$scope.changeClass = function(id){ 
angular.element(document.querySelector('.some-class').removeClass('.some-class'); 
angular.element(document.querySelector(id)).addClass('.some-class'); 
}