Css 离子动态工具栏背景色

我有一个页脚，我想使其背景色动态。我试图将元素绑定到一个类或提供动态样式，但它不起作用。事件它没有采用这种样式。我的html中有这种样式

<ion-footer align="center" style="height: 50px" *ngIf="visibility">
  <ion-toolbar class="testing"> //or// <ion-toolbar style="background-color: lightgreen">
    <ion-title>
      .....

//或

只有这是有效的，但我不知道如何使它充满活力

.toolbar-background {
  background-color: lightgreen;
  color:white
}

---

您通常会使用

ngStyle

或

ngClass

来动态设置html元素的样式。然而，

iontoolbar

是离子2的自定义组件。 检查文档

尝试：

---

您可以在HTML中使用以下代码：

<ion-toolbar [color]="currentColor"></ion-toolbar>

在.ts文件中，可以将“currentColor”变量初始化为默认颜色

private currentColor: string

constructor() {
    this.currentColor = 'light';
}

然后有一个功能，改变为深色

changeToDarkColor() {
    this.currentColor = 'dark';
} 

---

dynamic styleing

如中所示，您想根据条件以编程方式更改颜色吗？是的，我有一个对象，让我们说“Call”，颜色取决于“Call.status”整数变量我尝试了那些它不起作用的，它不接受类hanks！成功了。我认为[color]=“currentColor”应该是[color]=“{{currentColor}”

 <ion-toolbar [color]="colorStatus?'toolbar-color':'primary'">

<ion-toolbar [color]="currentColor"></ion-toolbar>

$colors: (
   blue:    #387ef5,
   secondary:  #32db64,
   danger:     #f53d3d,
   light:      #f4f4f4,  // the light color we're using
   dark:          #222   // the dark color we're using
);

private currentColor: string

constructor() {
    this.currentColor = 'light';
}

changeToDarkColor() {
    this.currentColor = 'dark';
}