Question

我希望看看是否可以采用代表角管名称的字符串并在模板中解析它。例如：

//Component:
pipe = 'date'

//Template
{{ pipe? ( somevalue | pipe ) : (somevalue) }}

在上面的示例中，有没有办法可以将字符串解析为可以在模板中使用的实际管道。有没有更好的方法动态应用管道？

此处的用例是让组件的用户确定要用于该值的格式（如果有）。

更新

结束使用自定义管道接受管道名称作为字符串执行，以及任何其他可能的格式。这是一个片段，管道可能是＆＃39; date＆＃39;格式可能是＆＃39; MM / dd / yyyy＆＃39;：

{{ somevalue | applypipe: pipe: format }}

然后我会使用某种映射/工厂作为接受的管道名称，创建它然后运行它的变换方法。

感谢您的想法！

Answer 1

也许这有助于获得一个想法..

@Pipe({
  name: 'anyPipe'
})
export class AnyPipe {
  public transform(val: any, arg: any) {
    return '!!' + val;
  }
}

@Pipe({
  name: 'dynPipe'
})
export class DynamicPipe {
  public transform(val: any, pipe: any) {
    if (!pipe) return val;

    switch (pipe) {
      case 'p1': return val + '-p1';
      case 'p2': {
        return new AnyPipe().transform(val, 'some args', 'maybe', '..');
      }
      case 'p3': return val + '-p3';
      default: return val;
    }
  }
}

live-demo：https://plnkr.co/edit/V64fok5eFeHAHz8DB6DJ?p=preview

Answer 2

@Pipe({
  name: 'cap'
})


export class CapPipe implements PipeTransform {


  transform(value: any, args?: any): any {
    return value[0].toUpperCase() + value.substr(1, value.length);
  }
}


@Pipe({
  name: 'pip'
})

export class PipPipe implements PipeTransform {


  constructor(private injector: Injector) {
  }

  transform(value: any, pipeName: string): any {
    const pipe = this.injector.get<PipeTransform>(<any>pipeName, <any>{} );
    if (pipe.transform && typeof  pipe.transform === 'function') {
      return (pipe.transform(value));
    } else {
      return value;
    }
  }

}

将管道'cap'添加到app模块中的提供者列表

providers: [
    { provide: 'cap', useClass: CapPipe },
],

在模板中使用

{{title | pip: 'cap' }}

Angular2：将字符串解析为管道

2 个答案: