如何利用Angular环境变量动态控制导航栏标签显示？

完全可以通过环境变量实现这个需求，以下是具体实现步骤：

1. 完善所有环境文件的配置 #

首先要确保所有环境文件都包含tabList属性，避免TypeScript类型报错：

基础环境文件 environment.ts #

export const environment = {
  production: false,
  apiUrl: "",
  tabList: [] // 基础定义，构建时会被具体环境文件覆盖
};

environment.local.ts（保留全部4个标签） #

export const environment = {
  production: false,
  apiUrl: "http://localhost:8080/",
  tabList: [
    { id: 0, name: 'Home', routerLink: '/' },
    { id: 1, name: 'Story Pointing', routerLink: '/spe' },
    { id: 2, name: 'T-shirt Sizing', routerLink: '/tse' },
    { id: 3, name: 'Asset Tracker', routerLink: '/tat' }
  ]
};

environment.dev.ts（仅保留前3个标签） #

export const environment = {
  production: false,
  apiUrl: "你的dev环境API地址",
  tabList: [
    { id: 0, name: 'Home', routerLink: '/' },
    { id: 1, name: 'Story Pointing', routerLink: '/spe' },
    { id: 2, name: 'T-shirt Sizing', routerLink: '/tse' }
  ]
};

2. 组件中替换硬编码的列表 #

修改头部组件的TS文件，从环境变量中获取导航列表，替代原来的硬编码appList：

import { Component, OnInit } from '@angular/core';
import { environment } from '../../environments/environment'; // 注意路径要匹配项目结构

export class HeaderComponent implements OnInit {
  appSelected: string;
  appList = environment.tabList; // 直接从环境变量获取动态列表

  constructor() { }

  ngOnInit(): void {
    if (this.appList.length > 0) {
      this.appSelected = this.appList[0].name;
    }
  }

  selectApp(appId: any) {
    // 优化逻辑：通过find匹配避免索引越界问题
    const selectedApp = this.appList.find(app => app.id === appId);
    if (selectedApp) {
      this.appSelected = selectedApp.name;
    }
  }
}

3. 确保构建命令关联正确环境配置 #

检查angular.json中的configurations节点，确认local和dev环境已配置文件替换规则：

"configurations": {
  "local": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.local.ts"
      }
    ]
  },
  "dev": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.dev.ts"
      }
    ]
  }
}

之后使用对应命令构建：

• 构建local环境：ng build --configuration local
• 构建dev环境：ng build --configuration dev

替代方案（可选） #

如果需要无需重新构建就能调整导航列表，可以将配置放在单独的JSON文件中，通过APP_INITIALIZER在应用启动时加载，但对于仅区分构建环境的场景，环境变量方案更简洁高效。

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