Angular 动态字符串绑定

Question

I am trying to implement one standard where all string files are from separate constant files. Everything works great, but facing difficult when dynamic values in string occurs. Kindly help me how to use the constants.

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

Output: In HTML am receiving like 'You have created {{count}} users' but I want like 'You have created 10 users

Answer 1

Another option is to create a pipe that will interpolate the string for you.

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;
  }
}

and in the template:

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

The limitation here is that it can't interpolate objects like test.test

You can check the stackblitz here .

Inspiration from: https://stackoverflow.com/a/45235190/5613720

Answer 2

I am not sure if that is possible using enums though one possible workaround could be yby wrapping your literals into functions so change your enum to class like

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

then create a function to render like

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

then on ui

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

demo

Answer 3

Would the following work for you?

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;
   }
}

UI

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

Check stackblitz here

Answer 4

For this you usually use the TranslateService , where you define several strings through out your application. Later you can use it like that and have the functionality to add parameters to it like:

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

SuccessMessage is your constant to get from a dictionary and param is the parameter like you mentioned.

What do you need to do?

1. Install Ngx Translate and init the TranslateService for your application

2. Define the translations/string constants

Once you've imported the TranslateModule, you can put your translations in a json file that will be imported with the TranslateHttpLoader. The following translations should be stored in en.json.

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

4. Use the service, the pipe or the directive
   • With the service, it looks like this:

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

• This is how you do it with the pipe:

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