在 Angular 中的字符串中声明一个变量

Question

我正在使用 Angular，在 i18n 文件夹下，我有多个 json 文件，例如这个文件，用于不同的语言。我正在寻找一种在字符串中使用“目标”变量的动态方法。

  {
      "title": "Connection,
      "targets": {
        "facebook": "Facebook",
        "instagram": "Instagram",
        "linkedin": "LinkedIn",
      },
      "message-success": "You connected successfully!",
      "message-failure": "You're connection failed",
      "failure-title": "Why did the connection to (here I want to use one of the targets, something like {{target}}) failed?"
    }

然后显示在html.

 <div [hidden]="!error">
    <[ngClass]="'-background-grey-4 spacing padded'">{{'failure-title'}}</p-text>      
  </div>

Answer 1

假设我正确理解了你的问题，你可以利用 translate 管道来使用属性并动态传递一个值来替换 {{target}}.

<div [hidden]="!error">
  <p-text [ngClass]="'-background-grey-4 spacing padded'">
    {{ "failure-title" | translate : { target: yourValue } }}
  </p-text>      
</div>

Answer 2

如果我没理解错的话，您可以尝试将 JSON 字符串放入对象中，然后访问组件中的对象属性。然后，您可以访问执行 objName.targets

的属性

要将 JSON 转换为广告对象，请使用 JSON.parse(yourText)。

在执行此操作之前，在同一文件夹或共享文件夹（例如 target.model.ts）中创建一个模型（class 来定义对象）。

定义对象：

export class connectionStatus { constructor(public title: string, etc...) }

定义对象的所有属性。它们必须与您从文件中读取的相匹配。

解析 JSON:

let connectionStatusLocale: {
    title: string,
    targets: {facebook: 'Facebook', etc...},
    etc...
  } = JSON.parse(string);   //where string is the text you have read from a file

  this.conectionStatus = connectionStatusLocale;

在转换字符串时，在解析之前定义类型以避免错误。

在 Angular 中的字符串中声明一个变量

Declare a variable inside a string in Angular

html

internationalization

angular