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

Question

我正在尝试将插值和 angular-translate 结合起来，从几个 json 文件中检索 en -> fr 的 lang 翻译。但是，所有定义都已定义为在 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() 和 return 一个新值，但是有很多不同的翻译需要处理很多不同的参数。有没有办法在 html 文件的插值字符串中使用 .replace ？如下图

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

Answer 1

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

例如：

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

在这里，您首先删除空格，然后翻译 'cleaned' 字符串。

Answer 2

我只想制作一个去除空白的新管道。请务必在您的应用程序模块中注册它。

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

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

Angular Translate: Using .replace in an interpolation string in HTML

html

interpolation

translate

ngx-translate

angular