angular - 在运行时使用管道名称/元数据调用管道

Question

我正在尝试构建一个动态表，我希望在运行时决定使用哪个管道(如果有的话)。

我正在尝试实现类似于(简化)的东西:

export class CellModel {
     public content: any;
     public pipe: string
}

表格

<tbody>
     <tr *ngFor="let row of data">
         <template ngFor let-cell [ngForOf]=row>
           <td *ngIf="cell.pipe">{{cell.content | cell.pipe}}</td>
           <td *ngIf="!cell.pipe">{{cell.content}}</td>
     </tr>
</tbody>

我知道这个例子会出错。我可以使用 Reflect 是某种方式还是其他解决方案？

Answer 1

您不能动态应用管道。您可以做的是构建一个“元”管道来决定要执行的转换。

@Pipe({
  name: 'meta'
})
class MetaPipe implements PipeTransform {
  transform(val, pipes:any[]) {
    var result = val;
    for(var pipe of pipes) {
      result = pipe.transform(result);
    }
    return result;
  }
}

然后像这样使用它

<td *ngIf="cell.pipe">{{cell.content | meta:[cell.pipe]}}</td>