CSS 将类添加到 Angular 4 中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45816271/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add class to an element in Angular 4
提问by Navaneeth S R
I was trying to create an image gallery with Angular 4.The logic behind this is to add a Cascading Style Sheet (CSS) class to the selected image that will show a red border on the selected (clicked) image. This is the CSS stylesheet for an image gallery.
我试图用 Angular 4 创建一个图片库。这背后的逻辑是向所选图像添加一个层叠样式表 (CSS) 类，该类将在所选（单击）图像上显示红色边框。这是图片库的 CSS 样式表。
I want to show a red selection square on the image I have clicked. this-is-a-classshould be added to the selected image.
我想在我点击的图像上显示一个红色的选择方块。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;
}
following is the template code
以下是模板代码
<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>
The component code is as follows
组件代码如下
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';
}
}
回答by Arun Kumaresh
Use [ngClass]and conditionally apply class based on the id.
使用[ngClass]和有条件地应用基于id.
In your HTML file:
在您的 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>
In your TypeScript file:
在您的打字稿文件中：
addClass(id: any) {
this.id = id;
}
回答by Fredrik Lundin
Here is a plunkershowing how you can use it with the ngClassdirective.
这是一个plunker，展示了如何将它与ngClass指令一起使用。
I'm demonstrating with divs instead of imgs though.
不过，我正在用divs 而不是imgs 进行演示。
Template:
模板：
<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:
TS：
export class App {
selectedIndex = -1;
setSelected(id: number) {
this.selectedIndex = id;
}
}
回答by Mahendra Hirapra
If you want to set only one specific class, you might write a TypeScript function returning a boolean to determine when the class should be appended.
如果您只想设置一个特定的类，您可以编写一个返回布尔值的 TypeScript 函数来确定何时应附加该类。
TypeScript
打字稿
function hideThumbnail():boolean{
if (/* Your criteria here */)
return true;
}
CSS:
CSS:
.request-card-hidden {
display: none;
}
HTML:
HTML:
<ion-note [class.request-card-hidden]="hideThumbnail()"></ion-note>
回答by Elron
If you need that each div will have its own toggle and don't want clicks to affect other divs, do this:
如果您需要每个 div 都有自己的切换按钮并且不希望点击影响其他 div，请执行以下操作：
Here's what I did to solve this...
这是我为解决这个问题所做的...
<div [ngClass]="{'teaser': !teaser_1 }" (click)="teaser_1=!teaser_1">
...content...
</div>
<div [ngClass]="{'teaser': !teaser_2 }" (click)="teaser_2=!teaser_2">
...content...
</div>
<div [ngClass]="{'teaser': !teaser_3 }" (click)="teaser_3=!teaser_3">
...content...
</div>
it requires custom numbering which sucks, but it works.
它需要自定义编号，这很糟糕，但它有效。
回答by Aravind Reddy
you can try this without any java script you can do that just by using CSS
你可以在没有任何java脚本的情况下尝试这个你可以通过使用CSS来做到这一点
img:active,
img:focus,
img:hover{
border: 10px solid red !important
}
of if your case is to add any other css class by clicking you can use query selector like
如果您的情况是通过单击添加任何其他 css 类，您可以使用查询选择器，例如
<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)" >
in controller first search for any image with red border and remove it then by passing the image id add the border class to that image
在控制器中首先搜索任何带有红色边框的图像并将其删除，然后通过传递图像 ID 将边框类添加到该图像
$scope.changeClass = function(id){
angular.element(document.querySelector('.some-class').removeClass('.some-class');
angular.element(document.querySelector(id)).addClass('.some-class');
}
