Angular：组件中可通过变量访问对象键，HTML模板中无法访问

我在environment文件中导出了一个包含字符串的对象，以便全局使用这些值。

以下是我的environment.ts代码：

export interface RegionNames {
  br: any;
  bo: any;
}

export const environment = {
  production: false,
  region_id: "br",
};

export const region_phrases: RegionNames = {
  br: {
    "string1": "A",
    "string2": "B",
    "string3": "C",
    "string4": "D",
    "string5": "E",
  },
  bo: {
    "string1": "AA",
    "string2": "BB",
    "string3": "CC",
    "string4": "DD",
    "string5": "EE",
  }
}

在组件脚本中，我可以成功获取对象中的字符串：

console.log(region_phrases[environment.region_id as keyof RegionNames].string1);

但在HTML模板中使用完全相同的代码时却报错：

<span class="visually-hidden">{{ region_phrases[environment.region_id as keyof RegionNames].string1 }}</span>

错误信息：

error TS7053: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'RegionNames'.
No index signature with a parameter of type 'string' was found on type 'RegionNames'.

我不想在项目的每个组件中都为该对象创建变量来在HTML中访问，有没有更简便的解决方法？

方案1：给RegionNames添加索引签名 #

修改environment.ts中的RegionNames接口，添加字符串索引签名，让TypeScript允许用字符串类型的键索引该类型：

export interface RegionNames {
  // 保留原有明确的键定义
  br: {
    string1: string;
    string2: string;
    string3: string;
    string4: string;
    string5: string;
  };
  bo: {
    string1: string;
    string2: string;
    string3: string;
    string4: string;
    string5: string;
  };
  // 添加索引签名，允许任意字符串键
  [key: string]: {
    string1: string;
    string2: string;
    string3: string;
    string4: string;
    string5: string;
  };
}

修改后，模板中可直接简化代码，无需类型断言：

<span class="visually-hidden">{{ region_phrases[environment.region_id].string1 }}</span>

方案2：创建全局管道（Pipe） #

创建专门用于获取区域字符串的管道，一次性解决所有组件的模板访问问题：

1. 生成管道文件：

ng generate pipe region-phrase

2. 实现管道逻辑：

import { Pipe, PipeTransform } from '@angular/core';
import { environment, region_phrases } from '../environments/environment';

@Pipe({
  name: 'regionPhrase',
  standalone: true // Angular 14+可设置为独立管道，无需在模块中声明
})
export class RegionPhrasePipe implements PipeTransform {
  transform(phraseKey: string): string {
    return region_phrases[environment.region_id][phraseKey];
  }
}

3. 在模板中使用：

<span class="visually-hidden">{{ 'string1' | regionPhrase }}</span>

只需在需要的组件中导入该管道，即可直接使用，无需每个组件定义额外变量。

方案3：封装全局区域服务 #

创建Angular服务封装区域字符串的获取逻辑，通过依赖注入在组件中使用：

1. 生成服务文件：

ng generate service region

2. 实现服务逻辑：

import { Injectable } from '@angular/core';
import { environment, region_phrases } from '../environments/environment';

@Injectable({
  providedIn: 'root' // 全局提供，无需在模块中声明
})
export class RegionService {
  getPhrase(phraseKey: string): string {
    return region_phrases[environment.region_id][phraseKey];
  }
}

3. 在组件中注入并使用：
   组件脚本中注入服务：

import { Component } from '@angular/core';
import { RegionService } from './region.service';

@Component({
  selector: 'app-example',
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  constructor(public regionService: RegionService) {}
}

模板中调用：

<span class="visually-hidden">{{ regionService.getPhrase('string1') }}</span>

这种方式符合Angular最佳实践，逻辑集中管理，后续修改区域规则更方便。

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