Question

我正在尝试将插值和角度转换结合起来从en - ＆gt;中检索lang翻译。来自几个json文件的fr。然而，定义了所有定义以在HTML中显示插值字符串，如下所示：

{{ 'this.section.in.json.' + object.param | translate}}

所以它将把参数作为字符串，在en.json中找到它，如果设置是法语，则在fr.json中找到翻译。我的问题是Object.param来自一个API，它有一个空格，而json的结构不同：

Need param with no spaces--> "thisString": "this String" <--Object.Param returns this

我可以在我的组件中定义一个函数来使用.replace（）并返回一个新值，但是有很多不同的翻译要处理很多不同的参数。有没有办法在html文件中的插值字符串中使用.replace？如下图所示

{{ 'this.section.in.json.' + object.param.replace(*regex*, '') | translate}}

Answer 1

我会制作一个剥去空白区域的新管道。请务必在您的应用模块中注册。

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

@Pipe({ name: 'stripSpaces' })
export class StripSpaces implements PipeTransform {
  transform(str: string): any {
    return str.replace(/\s/g, '')
  }
}

然后在你的模板中使用这个

  {{ 'this.section.in.json.' + object.param | stripSpaces | translate }}

Answer 2

不，您不能直接在插值上下文中使用这些方法函数。但你可以链管。这意味着您可以先编写自己的管道来删除这些空格，然后再应用您的翻译。

e.g：

{{ 'this.section.in.json.' + object.param | removeWhitespaces | translate}}

首先删除空格，然后清除＆＃39;字符串被翻译。

Angular Translate：在HTML中的插值字符串中使用.replace

2 个答案: