Angular 角形通用管

我想编写通用的

管道

。这是我为数据类型

类别

按类别排序.ts

.html

因此，我想在这里使用通用解决方案，而不是使用相同类型的2
管道
，并且我还需要维护
类型化管道
。
试图用代码澄清@Rob已经指出的内容。您可以泛化管道的
transform（）
方法，以符合具有如下强制“名称”的特定类型

import { Pipe, PipeTransform } from '@angular/core';
import { sortBy } from 'lodash';

export interface NameModelForPipe {
 name: string; // forces the 'name' property
 [key: string]: any; // allows for basically another property of 'any' type
}

@Pipe({
  name: 'orderByNameModel',
})
export class OrderByNameModelPipe implements PipeTransform {
  transform(value: NameModelForPipe[]): NameModelForPipe[] {
    return sortBy(value, (o: NameModelForPipe) => { return o.name; });
  }
}

如果不想显式声明接口，可以在行中指定

import { Pipe, PipeTransform } from '@angular/core';
import { sortBy } from 'lodash';


@Pipe({
  name: 'orderByNameModel',
})
export class OrderByNameModelPipe implements PipeTransform {
  transform(value: { name: string; [key: string]: any; }[]): { name: string; [key: string]: any; }[] {
    return sortBy(value, (o: { name: string; [key: string]: any; }) => { return o.name; });
  }
}

我也在写同样的东西，发现了你的问题。答案很明显-通用函数将起作用：

@管道({
名称：“orderByName”，
})
导出类OrderByNamePipe实现PipeTransform{
变换（值：T[]）：T[]{
返回值。排序（（a，b）=>{
如果（a.name>b.name）返回-1；
如果（a.name

原始类型保留在模板中查看我在这里提出了一个类似的问题：因为我在网上搜索时浏览了这篇文章10次，所以我也想在这里发布一个黑客解决方案

我制作了以下简单的管道：


@Pipe({   name: 'toType',   pure: true, }) export class ToTypePipe
implements PipeTransform {   transform<T>(value: unknown, _: T): T {
    return value as T;   } }


简单地用
{name:string}
替换
Category
会行不通吗？我还没有在这里尝试过任何东西。希望你把你的建议作为一个更详细的答案@RobWell，在这里提问之前，你肯定应该自己尝试一下……事实上，我已经在上面写了
特定管道
。在那之后，我不知道如何将其转换为
通用的
。@RobI看不出你的建议和这里的
any
（
无类型
）之间有什么区别。你的想法是什么@抢劫
import { Pipe, PipeTransform } from '@angular/core';
import { sortBy } from 'lodash';

export interface NameModelForPipe {
 name: string; // forces the 'name' property
 [key: string]: any; // allows for basically another property of 'any' type
}

@Pipe({
  name: 'orderByNameModel',
})
export class OrderByNameModelPipe implements PipeTransform {
  transform(value: NameModelForPipe[]): NameModelForPipe[] {
    return sortBy(value, (o: NameModelForPipe) => { return o.name; });
  }
}

import { Pipe, PipeTransform } from '@angular/core';
import { sortBy } from 'lodash';


@Pipe({
  name: 'orderByNameModel',
})
export class OrderByNameModelPipe implements PipeTransform {
  transform(value: { name: string; [key: string]: any; }[]): { name: string; [key: string]: any; }[] {
    return sortBy(value, (o: { name: string; [key: string]: any; }) => { return o.name; });
  }
}


@Pipe({   name: 'toType',   pure: true, }) export class ToTypePipe
implements PipeTransform {   transform<T>(value: unknown, _: T): T {
    return value as T;   } }


[cdkColumnDef]="columns.name.def">   <td class="align-items-center p-4
w-80" cdk-cell *cdkCellDef="let element">  ```

`*cdkCellDef="let element"` this IS an `Animal` but angular template
do not allow us to have the correct typing, so in this case `let
element | typeOf: Animal.DOG` should be completely safe