使用Angular2更改类属性

Question

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

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

Answer 1

我发现这个答案与您的问题相同

我希望这是解决您的问题的方法

Angular2动态更改CSS属性

谢谢

编辑：

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

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

和

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

希望这项工作！

Answer 2

像这样尝试

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

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

Answer 3

在angular 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">