angular - 如何将管道发送到组件

标签 angular typescript

有没有办法将管道发送到组件?我有一个显示数据的组件,我想让用户选择他想使用哪个管道来显示数据,例如:

<app-my-component value="abcde" [pipe]="UpperCasePipe"></app-my-component>
<app-my-component value="0.95" [pipe]="PercentPipe"></app-my-component>
<app-my-component [value]="[1,2,3,4]" [pipe]="MySummarizePipe"></app-my-component>
所以,我需要的是这样的:
@Component({
  selector: 'app-my-component',
  template: `
    <span>{{value|pipe}}</span>
  `
})
export class MyComponent {
    @Input() value: any;
    @Input() pipe: any;
}

最佳答案

我认为没有办法实现你想要做的事情。
为什么不直接在传递值时使用管道,如下所示:

<app-my-component [value]="'abcde' | UpperCasePipe"></app-my-component>
<app-my-component [value]="0.95 | PercentPipe"></app-my-component>
<app-my-component [value]="[1,2,3,4] | MySummarizePipe"></app-my-component>

关于angular - 如何将管道发送到组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64446315/

相关文章:

typescript - 在 TypeScript 中导入时运行工厂函数?

javascript - 如何使用 WebStorm 在 TypeScript 而不是 JavaScript 中创建 Cucumber 步骤定义文件?

angular - 在 Angular2 的 ngfor 中设置属性

css - mat-button-toggle 不换行文本

javascript - 将 Angular 1 转换为 Angular 2 ngInit 函数

Angular 8 : How to use formControlName with FormArray

jquery - 如何在 Angular2 中操作 HTML 元素

Angular 4 subview 不更新

typescript - 为什么将变量重新分配给新对象时类型推断不适用于对象属性?

javascript - 如何移除全屏模式? (在应用浏览器中)