Angular 自定义管道参数

Question

我有一个自定义管道，我在其中传递文本和一些参数 在这里，我传递了一个像“我的名字是%name%”这样的文本，它将被转换为 “我的名字是 {{name}}” 在我传递名称的参数中：“ABC”如何将 {{name}} 替换为我在参数中传递的 ABC。

import { Pipe, PipeTransform } from '@angular/core'; 
import { DomSanitizer } from '@angular/platform-browser';

@Pipe({   name: 'textTransform' }) 
export class textTransform implements PipeTransform {   
    constructor(private sanitized: DomSanitizer) {}   

    transform(value: any, args?: any[]): any {
        let val = [];
        value = value.replace(/%.*?%/g, m => { m = m.slice(1, -1); 
        return this.sanitized.bypassSecurityTrustHtml(value);   
    }
}

args 是一个键值数组，例如 args[0].name="abc", args[0].age=11 所以如果字符串是"My Name is {{name}} and I am {{age}} years old" 应该转换成"My Name is abc and I am 10 years old"

Answer 1

像这样更新转换方法的语法错误

 transform(value: any, args?: any[]): any {
        const result= value.replace(/%.*?%/g, m => m.slice(1,m.length-1)); 
        return this.sanitized.bypassSecurityTrustHtml(result);   
    }

据我了解，您需要为名称传递一个新参数并进行替换

 transform(value: any, name:string): any {
        let val = [];
        value = value.replace(/%.*?%/g, m => name); 
        return this.sanitized.bypassSecurityTrustHtml(value);   
    }

模板

{{ 'My name is %name%' | name:'ABC' }} => My name is ABC

更新！ ??

如果替换值是一个数组并且基本字符串的位置类似于%target%，那么就这样做吧?

  transform(value: any, values: string[] =[]): any {
    let  result  = value;
    for(let val  of values ) {
     result = result.replace(/%.*?%/, (m) => val);
    }
    return (result);
  }

订单替换值在这里

模板

{{ 'My name is %name%' | name:['ABC','15'] }} => My name is ABC 
{{ 'My name is %name% and and age %age%' | name:['ABC','15'] }} => My name is ABC and and age 15
{{ 'My name is %replace% and and age %replace%' | name:['ABC','15'] }} => My name is ABC and and age 15

demo ??

Answer 2

另一种方法不是传递一个值数组，其中替换基于顺序，我们可以传递一个属性对象作为替换值，如果你有多个相同的地方，这更清晰，不会基于顺序限制在['abc',15,15]这样的数组的情况下，您不需要复制值

  transform(value: any, values: any = {}): any {
    let result = value;

    result = result.replace(/%.*?%/g, (m) => {
      const prop = m.slice(1, m.length - 1);
      return values[prop] || '' 
    })
    return result
  }

模板

{{ 'My name is %name%' | name:{name:'ABC',age : 15} }}
{{ 'My name is %name% and and age %age%' | name: {name:'ABC',age : 15} }}

%age% 需要有一个名称为 age 的属性，并且您需要提供像 'my name is %name% from %name% country' 这样的 uniq 名称 所以 theis 将不起作用，它必须是这种方式 'my name is %name% from %countryName% country' 使用像这样的对象作为参数 {name:'malbarmawi' , countryName :'Turkey'}

demo ??