我试图用 Angular 4 创建一个图片库。这背后的逻辑是向所选图像添加级联样式表 (CSS) 类,该类将在所选(单击)图像上显示红色边框。这是图片库的 CSS 样式表。
我想在我点击的图像上显示一个红色的选择方 block 。 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 '@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';
}
}
最佳答案
使用 [ngClass]
并根据 id
有条件地应用类。
在您的 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>
在您的 TypeScript 文件中:
addClass(id: any) {
this.id = id;
}
关于css - 将类添加到 Angular 4 中的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45816271/