Angular2：将字符串解析为管道答案

【问题标题】：Angular2: Resolve a string to a pipeAngular2：将字符串解析为管道
【发布时间】：2017-06-24 21:03:18
【问题描述】：

我正在寻找是否可以获取一个表示角度管道名称的字符串并在模板中解析它。例如：

//Component:
pipe = 'date'

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

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

这里的用例是让组件的用户决定为值使用哪种格式（如果有的话）。

更新

最终使用了一个自定义管道，该管道接受管道名称以作为字符串执行，以及任何其他可能的格式。这是一个 sn-p，其中管道可能是“日期”，格式可能是“MM/dd/yyyy”：

{{ somevalue | applypipe: pipe: format }}

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

感谢您的想法！

【问题讨论】：

为什么不构建一个自定义管道来注入服务。该服务可以提供一种方法来根据您的用户选择/格式改变转换方法。
所以您认为值将通过自定义管道传递，自定义管道将根据输入配置或服务配置返回值：{{ somevalue | custompipe: pipe }} 然后自定义管道尝试将字符串映射到实际管道，声明它，转换值并返回它。我理解正确吗？
是的，看来你需要一些工厂来正确解析你的管道。动态组件实例化无法正常工作，因此也需要动态管道实例化。

标签： angular angular2-template

【解决方案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;
    }
  }
}

现场演示：https://plnkr.co/edit/V64fok5eFeHAHz8DB6DJ?p=preview

【讨论】：

【解决方案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'添加到应用模块中的提供者列表

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

像这样在模板中使用

{{title | pip: 'cap' }}

【讨论】：