使用 Angular2 更改类属性答案

【问题标题】：Change class properties with Angular2使用 Angular2 更改类属性
【发布时间】：2017-07-03 09:42:49
【问题描述】：

如何使用angular2动态改变.red类的背景色？

var greenColor = 'green'
$('.red').css('background', greenColor);

【问题讨论】：

你可以使用ngClass指令..

标签： angular

【解决方案1】：

我在你的同一个问题中找到了这个答案

希望能解决你的问题

Angular2 dynamic change CSS property

谢谢

编辑：

在您的角度使用以下示例：

$scope.headerColor = "#FFFFFF";
$scope.divStyle = {
background-color : $scope.headerColor
}

和

<div class= "headerStyle" ng-class= "{'background-color' : headerColor}">

希望这项工作！

【讨论】：

其动态但内联样式发生变化，我需要更改类本身的属性。
阿卜杜拉，我需要 angular2 中的解决方案

【解决方案2】：

这样试试

  this.MsgStyle = this.sanitizer.bypassSecurityTrustStyle("green");

<span [style.background]="MsgStyle">Hello World</span>

【讨论】：

【解决方案3】：

在角度 2 中动态更改类属性

组件 ::

export class App {  

    alertType: string = "alert alert-";

  constructor(private dataService: DataService) {  }


  doTransaction(userId: string) {
        this.isLoading = true;
        var result;
        var response;
        var statuscode;

        this.dataService.doTransaction(this.userId)
            .subscribe(
            data => {
                console.log("data :: " + data);

            },
            error => {
                console.log(error);                
                this.message = error;  
                this.alertType = this.alertType + "danger" + " alert-dismissible fade show";              

            },
            () => {
                console.log("Response completed");                
                this.message = result.message;
                this.alertType = this.alertType + "success" + " alert-dismissible fade show";       
                this.alert = true;


            }

            );
    }
}

HTML ::

<div *ngIf="alert" [className]="alertType" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button> {{message}}

注意 ::

组件中的alertType 是在html 中使用的动态类名。而类名[className]指的是CSS类所以[className]="alertType" 将被浏览器解释为

 <div class="alert alert-info alert-dismissible fade show" role="alert">

【讨论】：