如何截断Angular2中的文本？

在Angular2中截断文本有几种方法，以下为常用的两种：

1. 管道 | slice

使用Angular2提供的管道slice可以轻松截断文本。该管道有两个参数——开始索引和截断的长度。通过将管道绑定到文本上，可以截断文本并显示所需的长度。例如下面的代码截断了"Hello World"的前5个字符：

<p>{{ 'Hello World' | slice:0:5 }}</p>

这将在页面上显示"Hello"。

2. 自定义过滤器

您还可以使用自定义过滤器来截断文本。如下所示，您可以编写一个名为“truncate”的过滤器，用于截断文本。

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

@Pipe({name: 'truncate'})
export class TruncatePipe implements PipeTransform {
  transform(value: string, limit: number): string {
    const trail = '...';
    return value.length > limit ? value.substring(0, limit) + trail : value;
  }
}

然后在您的模板中使用该新增的过滤器：

<p>{{ 'Hello World' | truncate:5 }}</p>

这将在页面上显示"Hello..."。在上面的示例中，我们创建了一个名为"limit"的参数，该参数将传递给截断方法，如果文本超出截断长度，则在字符串末尾添加省略号。

以上两种方法选择其一即可实现在Angular2中截断文本。

参考链接：

• Angular2 官方文档：Pipes