Angular中如何在TypeScript内获取HTML Label的i18n运行时值

你之前使用的i18n-[labelValue]="@@replacingValue"属于无效语法，Angular i18n 的i18n-*标记规则不支持这种写法：

• i18n-*仅能作用于标签已有的静态属性/组件输入属性，不能直接通过方括号语法动态给@Input绑定翻译值
• 错误的语法导致Angular没有识别到你要给labelValue输入属性绑定国际化文本，所以变量始终为undefined

方案1：通过模板引用变量读取渲染后的DOM文本（无侵入，适配现有写法） #

直接给label标签加模板引用标记，等视图初始化完成、i18n替换执行完毕后，读取元素的文本内容即可。
模板文件代码：

<label #targetLabel i18n="@@replacingValue">Default value</label>

TS文件代码：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';

@Component({/* 你的组件元数据 */})
export class YourComponent implements AfterViewInit {
  @ViewChild('targetLabel') labelEl!: ElementRef<HTMLLabelElement>;
  labelValue: string = '';

  ngAfterViewInit(): void {
    // 必须在ngAfterViewInit及之后的生命周期读取，此时i18n替换已完成
    this.labelValue = this.labelEl.nativeElement.textContent?.trim() ?? '';
    console.log(this.labelValue); // 输出替换后的国际化值
  }
}

方案2：使用$localize API直接在TS中获取翻译值（推荐，无DOM依赖） #

Angular 内置的$localize全局API可以直接通过i18n ID拿到对应翻译值，不需要依赖DOM渲染，是最稳定的实现方式。
TS文件代码：

import { Component } from '@angular/core';

@Component({/* 你的组件元数据 */})
export class YourComponent {
  // 直接通过i18n ID匹配翻译值，和模板中使用同一份翻译配置
  labelValue: string = $localize`:@@replacingValue:Default value`;

  ngOnInit(): void {
    console.log(this.labelValue); // 直接输出对应国际化值
  }
}

模板文件可以直接绑定变量，不需要重复写i18n标记：

<label>{{ labelValue }}</label>

方案3：给输入属性正确标记i18n（适合父子组件传值场景） #

如果是要给当前/子组件的@Input属性传递国际化值，去掉属性名外的方括号，按标准i18n-属性名格式写标记即可，Angular会自动完成值的替换。
模板文件代码：

<!-- 给当前组件/子组件的labelValue输入属性绑定国际化值 -->
<app-your-component
  labelValue="Default value"
  i18n-labelValue="@@replacingValue"
></app-your-component>

TS文件代码不需要额外处理，输入属性会自动拿到替换后的值：

import { Component, Input, OnInit } from '@angular/core';

@Component({/* 你的组件元数据 */})
export class YourComponent implements OnInit {
  @Input() labelValue!: string;

  ngOnInit(): void {
    console.log(this.labelValue); // 直接拿到替换后的国际化值
  }
}

注意：此方案中labelValue是写在标签属性位的静态默认值，不要加[]做动态绑定，否则i18n标记不会生效。

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