Почему пользовательский канал выдает ошибку: свойство 'transform' в типе 'EllipsisPipe' не может быть назначено тому же свойству в базовом типе 'SlicePipe'

Question

Я создал собственный канал с помощью чужого ответа на stackoverflow. Если article.title больше 55 символов, он должен быть обрезан после 55 символов, а три точки должны быть там, как хвост. Например:

1. Как приготовить торт
2. Как сделать холодный c ...
3. Приготовление карри на хо ...
4. Вкусный испанец sh яйца

Обратите внимание на пункты 2 и 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 { }

компонент приложения. html

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

Пожалуйста, исправьте мою ошибку. Этот вопрос не помог: Пользовательский канал возвращает ошибку. :: TypeScript & Angular2 .

PS: Полная ошибка:

ОШИБКА в src / app / pipe / ellipsis.pipe.ts (11,3): error TS2416: Свойство «преобразование» в типе «EllipsisPipe» нельзя назначить тому же свойству в базовом типе «SlicePipe». Type '(value: string, maxLength: number) => any' не может быть присвоено типу '{(значение: только чтение T [], начало: число, конец ?: число): T []; (значение: строка, начало: число, конец ?: число): строка; (значение: ноль, начало: число, конец ?: число): ноль; (значение: не определено, начало: число, конец ?: число): не определено; } '. Типы параметров «значение» и «значение» несовместимы. Тип 'readonly any []' не может быть назначен типу 'string'.

Странно то, что он работает с stackblitz , но дает указанную выше ошибку на localhost: 4200 .

Answer 1

• 1000 *

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

Ошибка связана с переопределением метода 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.com/edit/angular-kj9rtgcustompipe

Answer 3

Вы можете выполнить одну из следующих реализаций:

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.io/guide/pipes)

Интерфейс PipeTransform Метод преобразования важен для конвейера. Интерфейс PipeTransform определяет этот метод и управляет как инструментами, так и компилятором. Технически это необязательно; Angular ищет и выполняет метод преобразования независимо.

См. Другие ответы, в которых есть ссылки на интересные статьи.