javascript - Angular - 自定义管道不起作用？

Question

我正在尝试创建一个自定义管道，它将一个字符替换为另一个字符（用例：用空格分隔的单词替换连字符），但在遵循在线指南和 Angular 文档之后，我似乎无法让它工作。

堆栈闪电战

管道.ts

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

  transform(value: string, replace: string, withThis: string): any {
    return value.replace(replace, withThis);
  }

}

html用法

<!-- hyphenate = 'some-hyphenated-string' -->

<div>{{hyphenated | replace: {replace: '-', withThis: ' '} }}</div>

标签： javascriptangulartypescriptpipe

Answer 1

1）您没有正确调用自定义管道：

代替：

<div>{{hyphenated | replace: {replace: '-', withThis: ' '} }}</div>

利用：

<div>{{hyphenated | replace: '-': ' '}}</div>

---

2）您的replace用法仅替换字符串中的第一次出现：

代替：

return value.replace(replace, withThis);

利用：

return value.replace(new RegExp(replace, 'g'), withThis);

更新堆栈闪电战