Angular如何从名称为pipe的字符串调用管道？

Question

在Angular 2中，如何使用反射（或者我在其他地方称之为）使用管道？我有一个管道名称的字符串（如“小写”），我想只使用该字符串调用管道。

例如：

JSON

var cols = [{ dataProperty: "city", pipeName: "lowercase"},{ dataProperty: "state", pipeName: "uppercase"}]
var rows = [{city: 'Walla Walla', state: 'wa'}];

HTML（Angular component excerpt）

{{ rowData[col.dataProperty] | this.[col.pipeName] }}

但是这段代码不起作用。

我使用什么代替this.[col.pipeName]给我相当于动态调用uppercase或lowercase（或我在pipeName中定义的任何管道，假设它是管道我的代码可以访问）？

Answer 1

如果您的json数据将被硬编码

var cols = [{dataProperty: "city",  pipe: new LowerCasePipe()},
            {dataProperty: "state", pipe: new UpperCasePipe()}]

然后在您的模板html中

{{col.pipe.transform(rowData[col.dataProperty])}}

所有默认的弯角管道均实现PipeTransform接口，该接口上具有 transform 方法。

---

如果您的数据将来自api

您可以将其保留为pipeName: "uppercase" 并从字典中拉出相应的管道。

export class PipeManager {
  private static _pipes = {
    'upperCase': new UpperCasePipe(),
    'lowerCase': new LowerCasePipe(),
    'currency': new CurrencyPipe('en')
  };

  public static PipeForKey(key: string) {
    return PipeManager._pipes[key];
  }
}

然后在您的模板html中

{{PipeManager.PipeForKey(col.pipeName).transform(rowData[col.dataProperty])}}

此解决方案可能需要清理，但希望您能理解。