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

您可以使用相同的管道：

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 2

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

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

与

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

应该做你想做的事。正如@hgoebl replaceLineBreak所提到的那样，如果你需要在几个地方也可以实现它。

Plunker example

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

另一种方法是只进行一次替换并使用替换的换行符绑定值，而不是反复调用replaceLineBreak。

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

Answer 3

我一直在寻找一种方法来替换角度模板中变量中的子字符串，但要通过参数将substring和replacement传递给管道。

//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*`$" : "" }}

如何在角度2中替换字符串？

3 个答案: