离子动态工具栏背景颜色

Question

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

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

这在我的 .scss 中

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

//或者

.testing {
  background-color: lightgreen;
}

只有这样有效，但我不知道如何使其动态化。

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

Answer 1

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

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

在 variables.scss 文件中添加所需的颜色

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

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

private currentColor: string

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

然后有一个功能可以更改为深色

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