Angular 12如何解析字符串插值表达式？含i18n场景疑问

一、官方i18n方案（推荐生产环境） #

你的场景和国际化(i18n)的插值需求高度匹配，Angular官方i18n体系原生支持插值替换，且能无缝适配多语言切换：

1. 定义翻译项：在XLIFF/XTB翻译文件中添加带占位符的条目，例如：

   <trans-unit id="helloKey" datatype="html">
     <source>Hello {{name}}</source>
     <target>你好 {{name}}</target>
   </trans-unit>
   

2. 组件中使用：

   • 代码内通过$localize调用：

     import { $localize } from '@angular/localize';
     
     const contextObject = { name: 'World' };
     const result = $localize`:@@helloKey:Hello ${contextObject.name}`;
     

   • 模板中直接绑定：

     <p i18n="@@helloKey">Hello {{contextObject.name}}</p>
     

官方i18n会自动处理插值逻辑，同时支持表达式运算、多语言切换，是生产环境的首选方案。

二、利用Angular Parser/Lexer实现自定义解析 #

你已经完成了AST解析的第一步，接下来需要创建执行环境来求值解析后的表达式：

import { Parser, Lexer, Interpolation } from '@angular/compiler';
import { Injector, NgModule, Component, createNgModule, createComponent } from '@angular/core';

// 1. 解析插值字符串为AST
const context = { name: 'World' };
const lexer = new Lexer();
const parser = new Parser(lexer);
const interpolationAst: Interpolation = parser.parseInterpolation('Hello {{name}}', '', 0);

// 2. 创建临时组件承载表达式求值
@Component({ template: `<ng-container>{{expression}}</ng-container>` })
class TempEvalComponent {
  expression = interpolationAst.expressions[0];
  context = context;
}

@NgModule({ declarations: [TempEvalComponent] })
class TempEvalModule {}

// 3. 编译组件并求值
const injector = Injector.create({});
const moduleRef = createNgModule(TempEvalModule, injector);
const componentRef = createComponent(TempEvalComponent, { ngModuleRef: moduleRef });

componentRef.instance.context = context;
componentRef.changeDetectorRef.detectChanges();

// 4. 获取最终结果
const parsedResult = componentRef.nativeElement.textContent;
console.log(parsedResult); // 输出 "Hello World"

// 清理资源
componentRef.destroy();
moduleRef.destroy();

这种方式能支持复杂表达式（如{{user.name.toUpperCase()}}），完全复用Angular的表达式解析能力，但实现相对繁琐，适合需要处理复杂插值的场景。

三、简单场景：正则表达式替换 #

如果仅需简单键值替换，无需复杂表达式运算，正则替换是最轻量的方案：

const contextObject = { name: 'World' };
const expression = 'Hello {{name}}';

const parsedText = expression.replace(/{{\s*(.*?)\s*}}/g, (_, key) => {
  return contextObject[key] || `{{${key}}}`; // 键不存在时保留原占位符
});

console.log(parsedText); // 输出 "Hello World"

该方案实现简单、性能优异，但不支持表达式运算、嵌套属性等复杂逻辑，适合简单占位符替换场景。

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