Angular中如何解析含插值表达式的JSON字符串标题？

当JSON数据中的title字段包含{{updatedTitle}}这类Angular插值语法时，直接通过title="{{info.title}}"绑定只会原样显示字符串，不会解析为TS中的变量值——因为Angular的静态插值只会做一层解析，不会嵌套处理表达式。

以下是两种可行的解决方法：

方法一：组件内预处理替换（适合简单变量场景） #

在组件初始化时，遍历数据数组，手动识别并替换插值语法为对应变量值：

组件TS代码 #

import { Component, OnInit } from '@angular/core';
import { data } from './data'; // 导入你的JSON数据

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
})
export class DemoComponent implements OnInit {
  data = [...data];
  updatedTitle = '动态生成的标题'; // 你的TS变量

  ngOnInit(): void {
    this.data.forEach(item => {
      // 匹配{{变量名}}格式的字符串
      const interpolateMatch = item.title.match(/{{\s*(\w+)\s*}}/);
      if (interpolateMatch && interpolateMatch[1]) {
        // 替换为组件内对应的变量值，不存在则保留原内容
        item.title = this[interpolateMatch[1]] ?? item.title;
      }
    });
  }
}

HTML代码（无需修改） #

<div *ngFor="let info of data">
  <button title="{{info.title}}">操作按钮</button>
</div>

这种方式性能开销小，适合仅替换单个变量的场景，但无法处理复杂表达式（如{{updatedTitle + ' - 新版'}}）。

方法二：自定义管道解析表达式（支持复杂场景） #

创建自定义管道，动态编译并解析字符串中的Angular表达式，支持更复杂的语法：

1. 创建解析管道 #

import { Pipe, PipeTransform } from '@angular/core';
import { Compiler, ComponentFactory, ComponentRef, Injector, NgModule, NgModuleRef } from '@angular/core';

@Pipe({ name: 'parseExpr' })
export class ParseExprPipe implements PipeTransform {
  constructor(
    private compiler: Compiler,
    private injector: Injector,
    private moduleRef: NgModuleRef<any>
  ) {}

  transform(expr: string, context: any): Promise<string> {
    if (!expr || !context) return Promise.resolve(expr);

    // 创建临时组件承载表达式
    const tempComponent = Component({ template: `<span>{{${expr.replace(/{{|}}/g, '')}}}</span>` })(class {});
    const tempModule = NgModule({ declarations: [tempComponent] })(class {});

    return this.compiler.compileModuleAndAllComponentsAsync(tempModule)
      .then(moduleFactory => {
        const modRef = moduleFactory.create(this.injector);
        const compFactory = moduleFactory.componentFactories.find(f => f.componentType === tempComponent);
        const compRef = compFactory.create(this.injector, [], null, modRef);
        
        // 将组件实例作为上下文传入，使表达式能访问组件变量
        Object.assign(compRef.instance, context);
        compRef.changeDetectorRef.detectChanges();
        
        const result = compRef.nativeElement.textContent;
        compRef.destroy();
        modRef.destroy();
        return result;
      })
      .catch(() => expr); // 解析失败返回原字符串
  }
}

2. 在模块中声明管道 #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DemoComponent } from './demo.component';
import { ParseExprPipe } from './parse-expr.pipe';

@NgModule({
  imports: [BrowserModule],
  declarations: [DemoComponent, ParseExprPipe],
  bootstrap: [DemoComponent]
})
export class AppModule {}

3. HTML中使用管道 #

<div *ngFor="let info of data">
  <button [title]="info.title | parseExpr: this">操作按钮</button>
</div>

注意：Angular Ivy编译器默认禁用动态编译，若使用Angular 9+，需在tsconfig.json中添加配置：

"angularCompilerOptions": {
  "enableIvy": false
}

（或改用Angular官方提供的@angular/elements等方案实现动态模板，避免关闭Ivy）

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