为什么自定义管道会出现错误。EllipsisPipe "类型中的属性 "transform "不能分配给基本类型 "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>

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

PS: 完整的错误是

ERROR in srcapppipesellipsis.pipe.ts(11,3): error TS2416: Property 'transform' in type 'EllipsisPipe' is not assignable to the same property in base type 'SlicePipe'. 类型'(value: string, maxLength: number) => any'不可分配给类型'{ (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; }'。 参数'value'和'value'的类型是不兼容的。 类型'readonly any[]'不能分配给类型'string'。

一个奇怪的事情是，它在 爆料 但在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 函数与父类中的现有函数发生冲突，也就是所谓的 SlicingPipe. 简单地说，实施 PipeTransform 接口，并在 SlicePipe 可以完成这项工作。

PipeTransform 其实也是可以选择的。(https:/angular.ioguidepipes。)

PipeTransform接口 变换方法对于一个管道来说是必不可少的。PipeTransform接口定义了该方法，并指导工具和编译器。从技术上讲，它是可选的；无论如何，Angular都会寻找并执行transform方法。

请看其他答案，其中有不错的文章链接。

Answer 2

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

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中的函数重载
• 类型脚本子类函数重载

Stackblitz。https:/stackblitz.comeditangular-kj9rtgcustompip-mfv6es。

Answer 3

错误是由于覆盖了方法 transform 从 SlicePipe 在你 EllipsisPipe.

Transform 在 Slice pipe 方法签名为

• <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 

尝试实施 transform 方式 PipeTransform

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.comeditangular-kj9rtgcustompipe。