时间戳

首页 > 解决方案 > ionic 4从api获取动态更改工具栏背景颜色

angular - ionic 4从api获取动态更改工具栏背景颜色

问题描述

我正在尝试通过从 API 获得的颜色来更新工具栏背景颜色。我可以很好地将颜色调用到应用程序中。

{ acf: { tob_bar_color: "#dd003b" } }

我正在尝试获得这样的背景颜色：

<ion-toolbar [ngStyle]="{'background':styles?.acf.tob_bar_color}">

当我检查元素时，它显示它添加了一个style="background: #dd003b;"但它仍然不会改变背景颜色。在检查器中，如果我像这样在背景前添加“--”：style="--background: #dd003b;"它确实会更新应用程序，但这仅在检查器中。但

标签： angularionic-frameworkionic4

解决方案

理想情况下，您应该以这种方式添加客户颜色： https ://ionicframework.com/docs/theming/colors#adding-colors

具体使用该文章中的此颜色生成器： https ://ionicframework.com/docs/theming/colors#new-color-creator

现在进入应用的文件夹 theme\variable.scss 并添加新颜色。下面我添加了 4 种颜色，分别命名为 color_a、color_b、color_c、color_d。您可以根据需要添加任意数量：

变量.scss：

:root {
  /** primary **/
  --ion-color-primary: #488aff;
  --ion-color-primary-rgb: 72,138,255;
  --ion-color-primary-contrast: #fff;
  --ion-color-primary-contrast-rgb: 255,255,255;
  --ion-color-primary-shade: #3f79e0;
  --ion-color-primary-tint: #5a96ff;

  /** custom **/
  --ion-color-color_a: #111111;
  --ion-color-color_a-rgb: 17,17,17;
  --ion-color-color_a-contrast: #ffffff;
  --ion-color-color_a-contrast-rgb: 255,255,255;
  --ion-color-color_a-shade: #0f0f0f;
  --ion-color-color_a-tint: #292929;

  --ion-color-color_b: #333333;
  --ion-color-color_b-rgb: 51,51,51;
  --ion-color-color_b-contrast: #ffffff;
  --ion-color-color_b-contrast-rgb: 255,255,255;
  --ion-color-color_b-shade: #2d2d2d;
  --ion-color-color_b-tint: #474747;

  --ion-color-color_c: #555555;
  --ion-color-color_c-rgb: 85,85,85;
  --ion-color-color_c-contrast: #ffffff;
  --ion-color-color_c-contrast-rgb: 255,255,255;
  --ion-color-color_c-shade: #4b4b4b;
  --ion-color-color_c-tint: #666666;

  --ion-color-color_d: #777777;
  --ion-color-color_d-rgb: 119,119,119;
  --ion-color-color_d-contrast: #ffffff;
  --ion-color-color_d-contrast-rgb: 255,255,255;
  --ion-color-color_d-shade: #696969;
  --ion-color-color_d-tint: #858585;

}

.ion-color-color_a {
  --ion-color-base: var(--ion-color-color_a);
  --ion-color-base-rgb: var(--ion-color-color_a-rgb);
  --ion-color-contrast: var(--ion-color-color_a-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_a-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_a-shade);
  --ion-color-tint: var(--ion-color-color_a-tint);
}

.ion-color-color_b {
  --ion-color-base: var(--ion-color-color_b);
  --ion-color-base-rgb: var(--ion-color-color_b-rgb);
  --ion-color-contrast: var(--ion-color-color_b-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_b-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_b-shade);
  --ion-color-tint: var(--ion-color-color_b-tint);
}

.ion-color-color_c {
  --ion-color-base: var(--ion-color-color_c);
  --ion-color-base-rgb: var(--ion-color-color_c-rgb);
  --ion-color-contrast: var(--ion-color-color_c-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_c-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_c-shade);
  --ion-color-tint: var(--ion-color-color_c-tint);
}

.ion-color-color_d {
  --ion-color-base: var(--ion-color-color_d);
  --ion-color-base-rgb: var(--ion-color-color_d-rgb);
  --ion-color-contrast: var(--ion-color-color_d-contrast);
  --ion-color-contrast-rgb: var(--ion-color-color_d-contrast-rgb);
  --ion-color-shade: var(--ion-color-color_d-shade);
  --ion-color-tint: var(--ion-color-color_d-tint);
}

一旦您的颜色成为应用程序 css 的一部分，您就可以在 html 模板中执行以下操作：

<ion-header>
    <ion-toolbar [color]="dynamicColor? dynamicColor:'primary'">
        <ion-title>
            Ionic 4 template
        </ion-title>
    </ion-toolbar>
</ion-header>

<ion-content padding>

  <ion-button (click)="updateColor('color_a')" color="color_a">Update Color with color A</ion-button>

  <ion-button (click)="updateColor('color_b')" color="color_b">Update Color with color B</ion-button>

  <ion-button (click)="updateColor('color_c')" color="color_c">Update Color with color C</ion-button>  

  <ion-button (click)="updateColor('color_d')" color="color_d">Update Color with color D</ion-button> 

</ion-content>

然后在您的 ts 文件中，您可以拥有最初未定义的颜色变量，然后从 API 或通过按钮动态获取其值：

import { Component } from '@angular/core';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.css'],
})
export class HomePage {

  dynamicColor: string;

  updateColor(color) {
    this.dynamicColor = color;
  }

}

这是堆栈闪电战： https ://stackblitz.com/edit/ionic-4-template-idsm2c

因此，如果您的 API 动态返回一个颜色值 (#323242)，您可以在 ts 文件中有一个颜色映射，将其映射到特定的 scss 颜色（color_a 等），因此您可以为 ion-toolbar 或按钮进行此动态颜色更新ETC

推荐阅读