如何在 angular 的不同环境中检查特征是否正确？

Question

我在 angular 中使用不同的环境，存储在环境文件夹中，例如：

environment.ts
environment.dev.ts
environment.prod.ts

在 environment.ts 文件中，我有：

export const environment = {
  production: false,
  environment: 'Development',
  advanced: {
    features: true
  }
};

我想在页面中显示 div 元素，仅当环境具有等于 true 的此高级功能时。我正在考虑做 :

import { environment } from './environments/environment';
export class AdvancedComponent implements OnInit {
  advancedFeatures:boolean;
  
  constructor() { }

  ngOnInit() {
    this.advancedFeatures= environment.advanced.features;

    if (this.advancedFeatures){
      console.log("true");
    }
    else {
      console.log('false');
    }
  }

}

如果环境是开发环境或生产环境，这足以隐藏或显示 div 元素吗？这是环境高级功能的好方法，还是我应该以某种方式将所有环境导入此 class?

Answer 1

您的 environment.ts 是导入环境文件时使用的默认配置。

Angular 能够在构建期间选择正确的环境文件的原因是利用其配置设置中的 fileReplacements 部分 (see ng docs)。这样可以确保您在代码中使用正确的 environment.advanced.features 值。

类似于fileReplacements中的prod版本，您可以定义任何一种设置（即dev or testing）并参考相应的环境文件。

至于您的方法的可行性——我个人更喜欢使用访问角色来定义用户可以看到哪些页面，但我也没有看到您的方法有任何特别的缺点。

如何在 angular 的不同环境中检查特征是否正确？

How to check feature is true on different environments in angular?

html

environment

typescript

angular