为什么自定义管道给出错误：“EllipsisPipe”类型中的属性“transform”无法分配给基本类型“SlicePipe”中的同一属性

Question

我在 stackoverflow 上其他人的答案的帮助下创建了一个自定义管道。如果article.title大于 55 个字符，则应在 55 个字符后进行修剪，并应有三个点（如尾巴）。例如：

1. 如何制作蛋糕
2. 如何制作冷饮...
3. 在家做咖喱...
4. 美味的西班牙鸡蛋

请注意第 2 点和第 3 点，多余的字符如何被修剪并替换为 3 个点。

这是代码：

省略号.pipe.ts

import { Pipe } from '@angular/core';
import { SlicePipe } from '@angular/common';

@Pipe({
  name: 'ellipsis'
})
export class EllipsisPipe extends SlicePipe {
  constructor () {
    super();
  }
  transform(value: string, maxLength: number): any {
    const suffix = value && value.length > maxLength ? "..." : "";
    return super.transform(value, 0, maxLength) + suffix;
  }
}

注：我...implements PipeTransform也尝试过。

应用程序模块.ts

@NgModule({
  declarations: [
    ...,
    EllipsisPipe // <-------------------- included in app module
  ],
  imports: [
    ...
  ],
  providers: [...],
  bootstrap: [AppComponent]
})
export class AppModule { }

应用程序组件.html

<h5 class="card-title">{{article.title | ellipsis:55}}</h5>

请纠正我的错误。这个问题没有帮助： 自定义管道返回错误。::TypeScript 和 Angular2。

PS：完整错误是：

src/app/pipes/ellipsis.pipe.ts(11,3) 中的错误：错误 TS2416：类型“EllipsisPipe”中的属性“transform”无法分配给基本类型“SlicePipe”中的同一属性。类型 '(value: string, maxLength: number) => any' 不可分配给类型 '{ (value: readonly T[], start: number, end?: number): T[]; （值：字符串，开始：数字，结束？：数字）：字符串；（值：null，开始：数字，结束？：数字）：null；（值：未定义，开始：数字，结束？：数字）：未定义；}'。参数“value”和“value”的类型不兼容。类型“readonly any[]”不可分配给类型“string”。

一件奇怪的事情是，它正在stackblitz上运行，但在 localhost:4200 上给出上述错误。

Answer 1

您还可以（除了已经提出的解决方案之外）尝试对基类使用类型脚本函数重载，实际上您可以尝试添加满足当前类和基类的方法签名列表

transform(value: string, start: number, end?: number): string;
transform(value: null, start: number, end?: number): null;
transform(value: string, maxLength: number): any {
  const suffix = value && value.length > maxLength ? '...' : '';
  return super.transform(value, 0, maxLength) + suffix;
}

一些资源：

• 揭秘 TypeScript 中的函数重载
• Typescript 子类函数重载

Stackblitz：https://stackblitz.com/edit/angular-kj9rtgcustompipe-mfv6es

Answer 2

您可以执行以下任一实现：

1. 在 HTML 中，使用：

   {{item | slice:0:15}} {{ item.length > 15 ? "...": "" }}
   

2. 将管道代码更改为：

   export class EllipsisPipe implements PipeTransform {
    transform(value: string, maxLength: number): any {
   const suffix = value && value.length > maxLength ? "..." : "";
   return new SlicePipe().transform(value, 0, maxLength) + suffix;
   }}
   

在您的代码中，该transform函数与父类 aka 中的现有函数发生冲突SlicingPipe。简单地说，实现PipeTransform接口并调用适当的函数就SlicePipe可以完成这项工作。

PipeTransform实际上也是可选的。（https://angular.io/guide/pipes）

PipeTransform 接口 Transform 方法对于管道来说是必不可少的。PipeTransform 接口定义了该方法并指导工具和编译器。从技术上讲，它是可选的；不管怎样，Angular 都会查找并执行转换方法。

请参阅其他答案，其中包含指向好文章的链接。