如何仅在PROD环境中隐藏元素？Angular TS代码实现方法

如果要仅在PROD环境下隐藏元素（非PROD环境正常显示），除了直接在模板里写*ngIf判断，也可以把逻辑放到组件TS代码中实现，以下是几种可行方案：

方案一：组件类中控制显示状态（推荐，逻辑集中） #

1. 导入环境变量：在组件TS文件顶部导入项目的环境配置

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

2. 定义控制变量并赋值：在组件类里声明布尔变量，根据环境状态初始化

export class YourComponent {
  // 控制按钮是否显示的变量
  showAddPhotoBtn: boolean;

  constructor() {
    // 逻辑：PROD环境隐藏（即不显示），其他环境显示
    // 如果你的环境用production布尔值判断（Angular默认配置）
    this.showAddPhotoBtn = !environment.production;
    // 如果你的环境用字符串标识（比如environment.env = 'prod'），则改成：
    // this.showAddPhotoBtn = environment.env !== 'prod';
  }
}

3. 修改模板绑定：把模板里的*ngIf绑定到TS中定义的变量

<div *ngIf="showAddPhotoBtn" class="col-6">
  <button class="btn btn-primary text-white add-photo" (click)="addPhoto()">Add Photo</button>
</div>

方案二：自定义指令（适合多处复用场景） #

如果多个组件都需要这个“非PROD环境显示”的逻辑，可以封装成自定义指令：

1. 生成指令：执行Angular CLI命令创建指令

ng generate directive show-if-not-prod

2. 实现指令逻辑：在指令类中根据环境决定是否渲染模板

import { Directive, TemplateRef, ViewContainerRef } from '@angular/core';
import { environment } from '../../environments/environment';

@Directive({
  selector: '[showIfNotProd]'
})
export class ShowIfNotProdDirective {
  constructor(
    private templateRef: TemplateRef<any>,
    private viewContainer: ViewContainerRef
  ) {
    // 非PROD环境渲染模板，PROD环境清空容器
    if (!environment.production) {
      this.viewContainer.createEmbeddedView(this.templateRef);
    } else {
      this.viewContainer.clear();
    }
  }
}

3. 模板中使用指令：替换原来的*ngIf为自定义指令

<div *showIfNotProd class="col-6">
  <button class="btn btn-primary text-white add-photo" (click)="addPhoto()">Add Photo</button>
</div>

补充说明 #

你提供的原有模板代码*ngIf="environment != 'prod'"其实已经能实现需求，但把判断逻辑移到TS中，能让模板更简洁，也方便后续对显示逻辑做扩展（比如添加其他判断条件）。另外要确保环境配置文件（environment.ts和environment.prod.ts）中的标识正确，执行ng build --prod时会自动使用生产环境配置。

内容的提问来源于stack exchange，提问作者Neeti Jain