Angular 18 系列（二十四）自定义字符串截断 Pipe 管道

小渣渣

需求：Angular 页面用户名如果过长，则截断显示，需要自己实现 Pipe 管道来截取字符串。

回顾：

Angular 9 系列（四）自定义 Pipe 管道
https://www.itsvse.com/thread-9248-1-1.html

效果图如下：



首先，使用 angular-cli 命令新建 TruncatePipe 管道，命令如下：

登录可见。

代码如下：

登录可见。

示例

public longStr = 'A really long string that needs to be truncated';

<h1>{{longStr | truncate }}</h1>
<!-- Outputs: A really long string that... -->

<h1>{{longStr | truncate : 12 }}</h1>
<!-- Outputs: A really lon... -->

<h1>{{longStr | truncate : 12 : true }}</h1>
<!-- Outputs: A really... -->

<h1>{{longStr | truncate : 12 : false : '***' }}</h1>
<!-- Outputs: A really lon*** -->

参考：超链接登录可见。