角度动态字符串绑定

Question

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

常量.ts

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

userPage.ts

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

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

userPage.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

Answer 2

我不确定使用enums 是否可行，尽管一种可能的解决方法可能是yby wrapping your literals into functions ，所以将您的枚举更改为类

 class testPageConstants {
     static  SuccessMessage = (count)=>`You have created ${count} users`
  }

然后创建一个像这样渲染的函数

 render(template, data) {
       return template(data);
   }

然后在用户界面上

<p> {{render(constantUIBind.SuccessMessage,count)}}</p>

demo

Answer 3

以下内容对你有用吗？

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

export class TestPageConstants {
   static SuccessMessage = (count) => { return `You have created ${count} users`};
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   constantUIBind: typeof TestPageConstants;
   count = 10;

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

用户界面

<p> {{constantUIBind.SuccessMessage(count)}}</p>

检查 stackblitz here

Answer 4

为此，您通常使用TranslateService，您可以在整个应用程序中定义多个字符串。稍后您可以像这样使用它，并具有向其添加参数的功能，例如：

<div>{{ 'SuccessMessage' | translate:param }}</div>

SuccessMessage 是您从字典中获取的常量，param 是您提到的参数。

你需要做什么？

1。安装 Ngx Translate 并为您的应用程序初始化 TranslateService

2。定义翻译/字符串常量

导入 TranslateModule 后，您可以将翻译放入一个 json 文件中，该文件将与 TranslateHttpLoader 一起导入。以下翻译应存储在 en.json 中。

{
    "HELLO": "hello {{value}}"
}

4. 使用服务、管道或指令
   • 使用该服务，它看起来像这样：

translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
    console.log(res);
    //=> 'hello world'
});

• 这是使用管道的方法：

<div>{{ 'HELLO' | translate:{value: 'world'} }}</div>