我正在尝试创建一个组件，您可以在其中传递应该用于组件内列表的管道。从我可以通过测试和四处寻找答案找到的唯一解决方案似乎创建了类似的东西：
<my-component myFilter="sortByProperty"></my-component>
my-component模板：
<li *ngFor="#item of list | getPipe:myFilter"></li>
然后映射myFilter到正确的管道逻辑并运行它，但这似乎有点脏并且不是最佳的。
我认为自 Angular 1 以来他们会想出一个更好的解决方案来解决这个问题，你也可以按照这些思路做一些事情。
在Angular 2中没有更好的方法吗？
基于 borislemke 的回答，这里有一个不需要eval()但我觉得相当干净的解决方案：
动态.pipe.ts：
import {
Injector,
Pipe,
PipeTransform
} from '@angular/core';
@Pipe({
name: 'dynamicPipe'
})
export class DynamicPipe implements PipeTransform {
public constructor(private injector: Injector) {
}
transform(value: any, pipeToken: any, pipeArgs: any[]): any {
if (!pipeToken) {
return value;
}
else {
let pipe = this.injector.get(pipeToken);
return pipe.transform(value, ...pipeArgs);
}
}
}
app.module.ts：
// …
import { DynamicPipe } from './dynamic.pipe';
@NgModule({
declarations: [
// …
DynamicPipe,
],
imports: [
// …
],
providers: [
// list all pipes you would like to use
PercentPipe,
],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts：
import { Component, OnInit } from '@angular/core';
import { PercentPipe } from '@angular/common';
@Component({
selector: 'app-root',
template: `
The following should be a percentage:
{{ myPercentage | dynamicPipe: myPipe:myPipeArgs }}
`,
providers: []
})
export class AppComponent implements OnInit {
myPercentage = 0.5;
myPipe = PercentPipe;
myPipeArgs = [];
}
我设法让一些东西工作，它有点肮脏和邪恶（使用 eval）但它对我有用。在我的例子中，我有一个表格组件，每一行都有不同的数据类型（例如标题、网址、日期、状态）。在我的数据库中，状态标记为1asenabled或0for disabled。当然，最好向我的用户显示启用/禁用。此外，我的标题栏是多语言的，这使得它成为一个对象，en或者id作为它的键。
// Example row object:
title: {
"en": "Some title in English",
"id": "Some title in Indonesian"
},
status: 1 // either 1 or 0
理想情况下，我需要 2 个不同的管道来转换我的数据以显示给我的应用程序的用户。translateTitle类似的东西getStatus会做得很好。让我们调用父级的管道dynamicPipe。
/// some-view.html
{{ title | dynamicPipe:'translateTitle' }}
{{ status | dynamicPipe:'getStatus' }}
/// dynamic.pipe.ts
//...import Pipe and PipeTransform
@Pipe({name:'dynamicPipe'})
export class DynamicPipe implements PipeTransform {
transform(value:string, modifier:string) {
if (!modifier) return value;
return eval('this.' + modifier + '(' + value + ')')
}
getStatus(value:string|number):string {
return value ? 'enabled' : 'disabled'
}
translateTitle(value:TitleObject):string {
// defaultSystemLanguage is set to English by default
return value[defaultSystemLanguage]
}
}
我可能会对使用 eval 感到非常讨厌。希望能帮助到你！
更新：当你可能需要它时
posts = {
content: [
{
title:
{
en: "Some post title in English",
es: "Some post title in Spanish"
},
url: "a-beautiful-post",
created_at: "2016-05-15 12:21:38",
status: 1
},
{
title:
{
en: "Some post title in English 2",
es: "Some post title in Spanish 2"
},
url: "a-beautiful-post-2",
created_at: "2016-05-13 17:53:08",
status: 0
}
],
pipes: ['translateTitle', null, 'humanizeDate', 'getStatus']
}
<table>
<tr *ngFor="let row in posts">
<td *ngFor="let column in row; let i = index">{{ column | dynamicPipe:pipes[i] }}</td>
</tr>
</table>
将返回：
| title | url | date | status |
| Some post t... a-beautiful... an hour ago enabled
| Some post ...2 a-beautifu...2 2 days ago disabled
解决这个问题的最简单方法是不在 HTML 模板中使用管道，而是将管道注入组件的构造函数（使用 DI），然后在功能上应用转换。这适用于 Observable 地图或类似的 rxjs 流。
不幸的是，我不这么认为。它与 angular1 中的相同，其中您有一个函数为您想要的动态管道返回一个字符串。
查看文档，这正是他们展示它的方式。
https://angular.io/docs/ts/latest/guide/pipes.html
template: `
<p>The hero's birthday is {{ birthday | date:format }}</p>
<button (click)="toggleFormat()">Toggle Format</button>
`
然后在控制器中：
get format() { return this.toggle ? 'shortDate' : 'fullDate'}
唉，可能会更糟！:)
在@Balu 的基础上回答这个我必须做的才能让它与 Angular 9 一起工作
import { Injector, Pipe, PipeTransform } from '@angular/core';
import { PercentPipe, CurrencyPipe, DecimalPipe } from '@angular/common';
@Pipe({
name: 'dynamicPipe'
})
export class DynamicPipe implements PipeTransform {
public constructor(private injector: Injector, private percentPipe: PercentPipe) {
}
transform(value: any, pipeToken: any, pipeArgs: any[]): any {
const MAP = { 'currency': CurrencyPipe, 'decimal': DecimalPipe, 'percent': PercentPipe }
if (pipeToken && MAP.hasOwnProperty(pipeToken)) {
var pipeClass = MAP[pipeToken];
var pipe = this.injector.get(pipeClass);
if (Array.isArray(pipeArgs)) {
return pipe.transform(value, ...pipeArgs);
} else {
return pipe.transform(value, pipeArgs);
}
}
else {
return value;
}
}
}
我通过将管道提供程序发送到组件来处理这个问题，它运行转换方法。它适用于 Angular 9。我希望它对某人有所帮助！演示：https ://stackblitz.com/edit/angular-kdqc5e
pipe-injector.component.ts：
import { Component, OnInit, Input, PipeTransform } from '@angular/core';
@Component({
selector: 'pipe-injector',
template: `
Should inject my pipe provider
{{ getText() }}
`,
providers: []
})
export class PipeInjectorComponent {
@Input() pipeProvider: PipeTransform;
@Input() pipeArgs: Array<any>;
@Input() textToFormat: string;
getText() {
return this.pipeProvider.transform(this.textToFormat, ...this.pipeArgs);
}
}
应用组件.ts：
import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-root',
template: `
<pipe-injector [pipeProvider]="pipeProvider" [pipeArgs]="pipeArgs" textToFormat='05-15-2020'>
</pipe-injector>
`,
providers: []
})
export class AppComponent implements OnInit {
pipeArgs = ['dd/MM/yyyy'];
constructor(public pipeProvider: DatePipe) {}
}
app.module.ts：
import { DatePipe } from '@angular/common';
import { PipeInjectorComponent } from './pipe-injector.component';
@NgModule({
declarations: [
PipeInjectorComponent,
],
imports: [
],
providers: [
DatePipe,
],
bootstrap: [AppComponent]
})
export class AppModule { }
我在@balu 的回答中添加了一些类型
import { Pipe, PipeTransform } from '@angular/core';
export type OmitFirstArg<T extends unknown[]> = T extends [unknown, ...infer U] ? U : never;
@Pipe({
name: 'dynamicPipe',
pure: true
})
export class DynamicPipe<P extends PipeTransform> implements PipeTransform {
public transform(
value: Parameters<P['transform']>[1],
pipeTransform: P,
pipeArgs?: OmitFirstArg<Parameters<P['transform']>>): ReturnType<P['transform']> | unknown {
if (!('transform' in pipeTransform)) {
return value;
}
return pipeTransform.transform(value, ...(pipeArgs || []));
}
}