html 在Angular 中,我们是否可以根据Angular 应用程序运行的环境显示不同的标题颜色?[duplicate]

w6lpcovy  于 2022-12-16  发布在  Angular
关注(0)|答案(2)|浏览(107)

此问题在此处已有答案

Angular 15 CLI does not create environments folder when creating an angular project via ng new(2个答案)
Angular Material2 use different theme (colors) for different builds/environments(2个答案)
17小时前关门了。
enter image description here例如:当我登录开发环境时:登录dev2环境时,应用程序的标题颜色应为绿色:登录测试环境时,应用程序的标题颜色应为蓝色:登录生产环境时,应用程序的标题颜色应为黄色:应用程序的标题颜色应为红色
有人帮忙吗?

1aaf6o9v

1aaf6o9v1#

是,使用环境变量。文档如下:
https://angular.io/guide/build#using-environment-specific-variables-in-your-app

// environment.ts (under the environments folder)
export const environment = {
  production: false,
  headerColor: 'green'
};

// environment.test.ts
export const environment = {
  production: false,
  headerColor: 'blue'
};

// environment.prod.ts
export const environment = {
  production: true,
  headerColor: 'yellow'
};

// in a component
import { environment } from './../environments/environment';

headerColor: string = environment.headerColor;
wyyhbhjk

wyyhbhjk2#

当你说header时,我假设你只是指一个位于src中的组件,这应该很容易做到:
1.确保在/environments文件夹中捕获了所有不同的环境,并且它们也位于angular-cli.json中。还可以确保每个环境对象都有唯一的标识符。
1.在组件内部,可以导入环境对象:import {environment} from '../../*correct relative path*/environment'
1.在组件的.scss文件中,可以根据您提到的业务逻辑定义多个具有不同背景色的类。
1.在.ts文件中创建一个getter变量,该变量具有switch case逻辑,可根据您所处的环境返回正确的类名。例如:

get headerClassPerEnvironment(): string {
  let class = "";
  switch (environment.uniqueIdentifier) {
    case ("dev"):
      class = "yellow-header";
      break;
    case ("staging"):
      class = "blue-header"
      break;
    case ("prod"):
      class = "whatever-header";
      break;
    default:
      class = "default-header";
  }
  
  return class;
}

1.最后,在.html文件中,可以使用创建的变量将多类绑定添加到HTML元素中。
希望这能有所帮助!
干杯。

相关问题