全局.replace Angular6

Question

我试图在angular6中实现以下目标：

https://jsfiddle.net/o8xufvyj/2/

一种替换字符串中所有出现的字符的方法。

{{string.replace(/-/g, ' ')}}

在Angular6中不起作用。不用多次使用.replace，如何在angular6中进行类似的工作？

Answer 1

管道可重复使用，因此建议以何种角度转换数据，因此您可以创建管道来替换基于正则表达式的字符串值

替换管道

@Pipe({
  name: 'replace'
})
export class ReplacePipe implements PipeTransform {

  transform(value: string, regexValue: string, replaceValue: string): any {
    let regex = new RegExp(regexValue, 'g');
    return value.replace(regex, replaceValue);
  }

}

模板

<p> {{stringText | replace:' ':'--'}}</p>
<p> {{stringText | replace:'[a-z]':'--'}}</p>
<p> {{stringText | replace:'[A-Z]':'--'}}</p>
<p> {{stringText | replace:'[a-zA-z]?':'**'}}</p>

stackblitz demo

Answer 2

将结果分配给公共变量。

组件

getFormatText（text）{    返回text.replace（/-/ g，''）; }

模板

{{getFormatText（text）}}

Answer 3

您的代码不起作用的原因是因为Angular试图从当前作用域（例如控制器）中解析您放置在“ {{}}”之间的任何内容。但是，您的范围没有“ string.replace”之类的内容，因此无法解析该值。

一种解决方案就是将一个函数放入您的控制器中，该函数将修改给定的字符串，然后将其返回，然后在HTML中使用该函数。

your-application-name.properties

然后在您的HTML中：

public replace(content: string) {
    return content.replace(/-/g, " ");
}

Answer 4

您可以在模板中执行此操作。您应该在组件中进行替换，然后将替换后的字符串绑定到模板中。

尝试在模板中执行此操作是一个坏主意，因为替换将在每次刷新视图时进行。