角度-自定义管道不起作用？

Question

I am attempting to create a custom pipe that will replace one character with another (use case: replacing hyphenated words with space separated words), but I cannot seem to get it working after following online guides and the Angular docs.

stackblitz

pipe.ts

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

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

}

html usage

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

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

Answer 1

1) You're not calling your custom pipe correctly:

Instead of:

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

Use:

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

---

2) Your replace usage only replaces the first occurrence in the string:

Instead of:

return value.replace(replace, withThis);

Use:

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

Updated stackblitz