如何替换 angular 2 中的字符串？

Question

我在 html 页面中使用了以下插值。

<div>{{config.CompanyAddress.replace('\n','<br />')}}</div>

也用过

<div>{{config.CompanyAddress.toString().replace('\n','<br />')}}</div>

但两者都显示如下文字

{{config.CompanyAddress.replace('\n','<br />')}}
{{config.CompanyAddress.toString().replace('\n','<br />')}}

Answer 1

{{}} 用于字符串插值，结果将始终作为字符串添加。在这种情况下，绑定根本不起作用，因为表达式中包含 < 和 >，{{}} 未按预期解释。

<div [innerHTML]="replaceLineBreak(config.CompanyAddress) | safeHtml"></div>

和

replaceLineBreak(s:string) {
  return s && s.replace('\n','<br />');
}

应该做你想做的。正如@hgoebl 所提到的，如果您在多个地方需要它，replaceLineBreak 也可以实现为管道。

Plunker example

提示：不鼓励直接绑定方法，因为在每个变更检测周期都会调用该方法。纯（默认）管道仅在输入值更改时调用。因此管道效率更高。

另一种方法是只进行一次替换，然后用替换的换行符绑定到值，而不是重复调用 replaceLineBreak。

提示：您可能想要替换所有换行符，而不仅仅是第一个。一。那里有足够多的 JS 问题可以解释如何做到这一点，因此我没有费心。

Answer 2

您也可以使用管道：

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({name: 'replaceLineBreaks'})
export class ReplaceLineBreaks implements PipeTransform {
  transform(value: string): string {
    return value.replace(/\n/g, '<br/>');
  }
}

管道必须包含在您的@NgModule 声明中才能包含在应用程序中。要在模板中显示 HTML，您可以使用绑定 outerHTML.

<span [outerHTML]="config.CompanyAddress | replaceLineBreaks"></span>

Answer 3

我一直在寻找一种方法来替换 angular 模板中变量中的子字符串，但是将 substring 和 replacement by 参数传递给管道.

//TS
import { Pipe, PipeTransform } from "@angular/core";
@Pipe({ name: "replaceSubstring" })
export class ReplaceSubstring implements PipeTransform {
  transform(subject: string, substring: string, replacement: string): string {

    //notice the need to instantiate a RegExp object, since passing
    //'substring' directly will NOT work, for example
    //subject.replace(substring, replacement) and
    //subject.replace(`/${substring}/`, replacement) don't work

    return subject.replace(new RegExp(substring), replacement);
  }
}

<!--HTML-->
<!--Example: remove a dot and the numbers after it, from the end of 'variable'-->
<!--Parameters in this case are "\.\d*`$" and "",
    you can pass as many as you want, separated by colons ':'-->

{{ variable | replaceSubstring: "\.\d*`$" : "" }}

如何替换 angular 2 中的字符串？

How to replace string in angular 2?

javascript

string-interpolation

angular