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

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

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

这里是我的 jquery 代码：

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

请帮帮我。

【问题讨论】：

你甚至尝试谷歌？ stackoverflow.com/questions/30410402/…
是的，但我认为这不适用于 angular 2。我正在寻找 angular 2 而不是 angularjs
您认为或尝试过并确定它不起作用？
我试过但没有用。

标签： jquery angular2-routing angular2-template angular2-forms

【解决方案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