小编Nav*_*S R的帖子

我试图用Angular 4创建一个图库.这背后的逻辑是为所选图像添加一个层叠样式表(CSS)类,它将在所选(单击)图像上显示红色边框.这是图库的CSS样式表.

我想在我点击的图像上显示一个红色选区.this-is-a-class应添加到所选图像.

#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;
}

以下是模板代码

<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>

组件代码如下

import { Component, OnInit } from …