Angular中自定义管道 - 字符串截断

1. 使用CLI创建新的管道

ng g p pipes/truncate --skip-tests

truncate.pipe.ts代码如下

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {

  transform(value: string, maxLength: number, showEllipsis: boolean) {
    const truncatedValue = maxLength ? value.substring(0, maxLength) : value;

    return showEllipsis ? `${truncatedValue}...` : truncatedValue;
  }
}

2. 创建测试页面

ng g c components/test-pipe --skip-tests

test-pipe.component.html测试代码如下

<p>{{ 'Hello World, I am Taylor.' | truncate:10:true}}</p>

在app-routing.module.ts添加route

{
    path: 'test-pipe',
    component: TestPipeComponent
  }

3. 在浏览器中测试

输入url

http://localhost:4200/test-pipe

测试结果