将类添加到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 指令一起使用。

我用divs 演示而不是imgs。

模板:

<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中的元素的主要内容,如果未能解决你的问题,请参考以下文章

我应该将类属性添加到 Angular 组件选择器标签吗

使用指令将类添加到宿主元素[重复]

css属性应用于ngFor上Angular 4中的ngStyle的错误元素

Angular - 自动将指令添加到具有给定类的所有元素

可以使用 Angular 4 中的插值将值添加到内联样式

Angular 4:访问其他组件中的模板元素