Angular自定义管道声明报错：仅允许组件、指令或管道，如何解决？

你遇到的报错原因很明确：自定义管道类必须添加@Pipe装饰器，仅实现PipeTransform接口不足以让Angular识别它是管道类型。

修改步骤： #

1. 从@angular/core导入Pipe装饰器
2. 在管道类上方添加@Pipe装饰器，指定用于模板调用的管道名称
3. 可选：为transform方法增加空值判断，避免传入null/undefined时抛出错误

修改后的完整代码（shortend.pipe.ts） #

import { Pipe, PipeTransform } from "@angular/core";

@Pipe({
  name: 'shorten' // 模板中调用管道时使用的名称，比如 {{ content | shorten }}
})
export class ShortendPipe implements PipeTransform {

    transform(value: string, limit: number = 10): string {
        // 空值判断，增强鲁棒性
        if (!value) return '';
        // 优化逻辑：仅当内容长度超过限制时才截断并添加省略号
        return value.length > limit ? value.substr(0, limit) + '...' : value;
    }
}

修改完成后，在app.module.ts的declarations数组中声明ShortendPipe即可正常使用，Angular会正确识别它为管道类型。

内容的提问来源于stack exchange，提问作者cha1nsaw