Angular - 如何基于环境编写 HTML 逻辑答案

【问题标题】：Angular - How to write HTML logic based on EnvironmentsAngular - 如何基于环境编写 HTML 逻辑
【发布时间】：2020-11-19 19:12:44
【问题描述】：

在 Angular 应用程序中，我必须根据生产、QA 或测试环境在 html 中显示不同的表格。

我已在下面导入，但不确定如何确定 QA 或 Prod 环境。有人可以帮我处理这个问题

import { environment } from ../../../environments/environment;

预期行为：

if( environment = 'Production') 
 displaycolumns = 5;
else if( environment = 'QA')
 displaycolumns = 3;
else
 displaycolumns = 2;

【问题讨论】：

标签： angular angular7

【解决方案1】：

在您需要检查环境的组件/服务中使用它

import { environment } from '../../environments/environment';

someFunction(){
   if(environment.production){
      console.log("In Production")
   }
   else{
      console.log("In devlopment")
   }
}

【讨论】：

【解决方案2】：

添加到app.module.ts

const APP_CONFIG = new InjectionToken('Application config');
import {environment} from '../environments/environment';

{provide: APP_CONFIG, useValue: environment},

在你的组件或服务中

constructor(
    @Inject(APP_CONFIG)
    private readonly _appConfig: Environment
  ) {
  }

【讨论】：