将类添加到Angular 4中的元素
Posted
技术标签:
【中文标题】将类添加到Angular 4中的元素【英文标题】:Add class to an element in Angular 4 【发布时间】:2018-01-30 15:49:50 【问题描述】:我正在尝试使用 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 '@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';
【问题讨论】:
如果手动将 css 分配给 li 是否可以正常工作? 一切正常。 请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式,并且可能会适得其反。请不要将此添加到您的问题中。 【参考方案1】:如果您只想设置一个特定的类,您可以编写一个返回布尔值的 TypeScript 函数来确定何时应该附加该类。
TypeScript
function hideThumbnail():boolean
if (/* Your criteria here */)
return true;
CSS:
.request-card-hidden
display: none;
HTML:
<ion-note [class.request-card-hidden]="hideThumbnail()"></ion-note>
【讨论】:
这是破坏性最小的选项(尽管并非总是可行。)即使在 Angular 8 中,您也可能遇到ngClass
结果将覆盖其他人所做的事情,而不是给您一个纯粹的联合。我认为通常当一个或多个指令另外使用 ngClass
时。【参考方案2】:
使用[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;
【讨论】:
当我点击它时,我想将类动态添加到元素中。 这就是我使用 ngClass 的原因 我们也可以删除我们添加的类吗?【参考方案3】:如果您需要每个 div 都有自己的切换开关并且不希望点击影响其他 div,请执行以下操作:
这是我为解决这个问题所做的...
<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>
它需要自定义编号,这很糟糕,但它可以工作。
【讨论】:
【参考方案4】:你可以在没有任何 java 脚本的情况下尝试这个,你可以通过使用 CSS 来做到这一点
img:active,
img:focus,
img:hover
border: 10px solid red !important
如果您的情况是通过单击添加任何其他 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)" >
在控制器中首先搜索任何带有红色边框的图像并将其删除,然后通过传递图像 id 将边框类添加到该图像
$scope.changeClass = function(id)
angular.element(document.querySelector('.some-class').removeClass('.some-class');
angular.element(document.querySelector(id)).addClass('.some-class');
【讨论】:
角度 4 - $scope? 哎呀!我认为 angularjs 无论如何你都可以使用逻辑 查看 ngClass,因为它是比这更好的答案。你也不应该使用 !important 默认情况下 这是 angular.js,不是 angular【参考方案5】:这是一个plunker,展示了如何将它与ngClass
指令一起使用。
我用div
s 演示而不是img
s。
模板:
<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;
【讨论】:
以上是关于将类添加到Angular 4中的元素的主要内容,如果未能解决你的问题,请参考以下文章