为什么自定义管道给出错误：“EllipsisPipe”类型中的属性“转换”不能分配给基类型“SlicePipe”中的相同属性

Question

在其他人对 stackoverflow 的回答的帮助下，我创建了一个自定义管道。如果article.title 大于 55 个字符，那么它应该在 55 个字符后被修剪，三个点应该像尾巴一样在那里。例如：

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

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

代码如下：

ellipses.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。

app.module.ts

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

app.component.html

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

请纠正我的错误。这个问题没有帮助： Custom pipe returns an error. ::TypeScript & Angular2.

PS：完全错误是：

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

一个奇怪的事情是它正在处理 stackblitz 但在 localhost:4200 上出现上述错误。

Answer 1

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

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 接口 管道。 PipeTransform 接口定义了该方法并指导两者 工具和编译器。从技术上讲，它是可选的；棱角分明的外观 for 并执行 transform 方法。

请查看其他包含好文章链接的答案。

Answer 2

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

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;
}

一些资源：

• Demystifying Function Overloading in TypeScript
• Typescript child class function overloading

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

Answer 3

错误是由于在您的EllipsisPipe 中从SlicePipe 覆盖了方法transform。

Slice pipe 中的Transform 的方法签名为

• <T>(value: readonly T[], start: number, end?: number): T[];

• (value: string, start: number, end?: number): string;

• (value: null,start: number, end?: number): null;
• (value: undefined, start: number, end?: number): undefined;

但是你的签名是

transform(value: string, maxLength: number): any 

尝试实现PipeTransform的transform方法

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

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

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