如何在angular2中使用add class 属性

Question

我的 angularjs 2 有问题 code.I 想应用这个 css 到 angular2.

在这里，我的 jquery 代码：

显示如何在 angular 中使用此代码 2. 我应该如何使用属性在 angular 中添加 class 2.

请帮帮我

Answer 1

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>

请检查代码希望能帮到你

谢谢

Answer 2

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

要有条件地将 class 添加到 DOM 元素，您需要向元素本身添加一个条件变量。

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

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

那个布尔值可以通过点击函数来设置。要向按钮添加点击事件，您需要 <input type="button" (click)="myFunction()">。然后，您将在组件中定义一个名为 myFunction() 的函数。 myFunction() 会将 this.myBoolean 设置为 true 或 false，这将切换幻灯片 1 class。

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

如何在angular2中使用add class 属性

How to use add class property in angular2

jquery

angular2-forms

angular2-template

angular2-routing