Angular 动态字符串绑定(bind)

Question

我正在尝试实现一种标准，其中所有字符串文件都来自单独的常量文件。一切都很好，但是当字符串中的动态值发生时面临困难。请帮助我如何使用常量。

常数.ts

export enum testPageConstants {
   SuccessMessage = 'You have created {{count}} users'
}

用户页面.ts

export class UserPage {
   import {testPageConstants} from '...';
   constantUIBind: typeof testPageConstants;
   count = 10;

   constructor() {
       this.constantUIBind = testPageConstants;
   }
}

用户页面.html

<p> {{constantUIBind.SuccessMessage}}</p>

输出:
在 HTML 中，我收到“您已创建 {{count}} 个用户”，但我想要“您已创建 10 个用户”

Answer 1

另一种选择是创建一个将为您插入字符串的管道。

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: "interpolate"
})
export class InterpolatePipe implements PipeTransform {
  transform(value: any, args: any) {
    value = value.replace(/{{([^}}]+)?}}/g, ($1, $2) =>
      $2.split(".").reduce((p, c) => (p ? p[c] : ""), args)
    );
    return value;
  }
}

并在模板中:

<p>{{constantUIBind.SuccessMessage | interpolate:this}}</p>

这里的限制是它不能插入像 test.test 这样的对象。

你可以查看stackblitz here .

灵感来自:
https://stackoverflow.com/a/45235190/5613720