Question

我必须为多个公司处理多个if (rows[i - 1].fromBuyerToSeller/rows[i - 1].fromSellerToBuyer > rows[i - 1].price) { const data = ([ rows[i].time*1,//time.toUTCString(), rows[i].fromBuyerToSeller/rows[i].fromSellerToBuyer*1, rows[i - 1].fromBuyerToSeller/rows[i - 1].fromSellerToBuyer*1, rows[i - 1].price*1, rows[i - 1].fromBuyerToSeller/rows[i - 1].fromSellerToBuyer*1, rows[i - 1].fromSellerToBuyer.toFixed(8) ]); retData.push(data); Chart.html // split the data set into trading and volume var trading = [], volume = [], dataLength = data.length, // set the allowed units for data grouping groupingUnits = [[ 'hour', // unit name [1] // allowed multiples ], [ 'day', [1, 7] ]], i = 0; for (i; i < dataLength; i += 1) { trading.push([ data[i][0], // the date data[i][1], // open data[i][2], // high data[i][3], // low data[i][4] // close ]); volume.push([ data[i][0], // the date data[i][5] // the volume ]); }```和其他CSS4变量。我该如何处理这种用例？即根据公司动态更改主要CSS4变量的颜色？

注意： ：这里的用例是我只需要更新primary变量，而无需考虑html元素。然后，它将影响使用primary的所有位置。

.html

primary

variables.scss

 <ion-button color="primary" (click)="reservation()">Book Now</ion-button>

另一家公司有这个：但是我需要动态设置它。

:root {
  /** primary **/
  --ion-color-primary: rgb(180, 151, 90);
}

我可以为此使用服务吗？

  :root {
      /** primary **/
      --ion-color-primary: rgb(129 147 171);
    }

Answer 1

这是我使用过的主题切换器。

import { Injectable, Inject } from '@angular/core';
import { DomController } from '@ionic/angular';
import { DOCUMENT } from '@angular/common';

@Injectable({
  providedIn: 'root'
})
export class ThemeSwitcherService {

  constructor(private domCtrl: DomController,
    @Inject(DOCUMENT) private document) { }

  setTheme(data: string): void {

    switch (data) {
      case "com1":
        this.domCtrl.write(() => {
          this.document.documentElement.style.setProperty("--ion-color-primary", "rgb(180, 151, 90)");
        });
        break;
      case "com2":
        this.domCtrl.write(() => {
          this.document.documentElement.style.setProperty("--ion-color-primary", "rgb(129,147,171)");
        });
        break;
      default:
    }

  }
}

这对我有很大帮助：Theme Switcher

动态更改CSS4变量

1 个答案: