如何在angular2中使用添加类属性

Posted

技术标签:

【中文标题】如何在angular2中使用添加类属性【英文标题】:How to use add class property in angular2 【发布时间】:2017-10-11 16:20:29 【问题描述】:

我的 angularjs 2 代码有问题。我想通过 angular2 应用这个 css。

这里是我的 jquery 代码:

显示如何在 Angular 2 中使用此代码。我应该如何在 Angular 2 中使用属性添加类。

请帮帮我。

【问题讨论】:

你甚至尝试谷歌? ***.com/questions/30410402/… 是的,但我认为这不适用于 angular 2。我正在寻找 angular 2 而不是 angularjs 您认为或尝试过并确定它不起作用? 我试过但没有用。 【参考方案1】:

不幸的是,到目前为止,每个人都在给你 Angular 的答案。在使用 Angular2 时,尽量不要使用 jQuery。直接使用jQuery的情况很少。

要有条件地将类添加到 DOM 元素,您需要向元素本身添加条件变量。

例如,如果您希望 <input id="username" class="username"> 有条件地拥有 slide1 类,您可以将输入元素更改为如下所示:

<input id="username" class="username [class.slide1]="myBoolean">

该布尔值可以通过 click 函数设置。要将单击事件添加到按钮,您将拥有<input type="button" (click)="myFunction()">。然后,您将在组件中定义一个名为 myFunction() 的函数。 myFunction() 会将 this.myBoolean 设置为 true 或 false,这将切换 slide1 类。

参见here for how events (like click) in angular2 work 和here for conditionally adding styles。

【讨论】:

同意,你不应该在 Angular2 中使用 jQuery。【参考方案2】:

var app = angular.module('myApp',[]);
	app.controller('showCrtl',function($scope)
			$scope.addclass=function(event)
		      event.target.classList.add('colorClass');
      ;
	);
.colorClass
  background-color:red;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="showCrtl">
  <input type="button" value="click" ng-click=addclass($event)>
</div>

请检查代码希望对您有所帮助

谢谢

【讨论】:

感谢您的回复,但我正在寻找 angular 2

以上是关于如何在angular2中使用添加类属性的主要内容,如果未能解决你的问题,请参考以下文章

Angular2,TypeScript,如何读取/绑定属性值到组件类(在 ngOnInit 中未定义)[重复]

Angular2 - 组件变量/组件类属性的两种方式数据绑定?

Angular2 - 组件变量/组件类属性的两种方式数据绑定?

在Angular2中,使用继承还是注入依赖?

在使用 EF 期间如何在 c# 中为类添加额外的属性

如何在类扩展中添加静态(存储)属性以制作单例? (迅速)