如何在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 - 组件变量/组件类属性的两种方式数据绑定?