如何截断Angular2中的文本？

Question

有没有一种方法可以将字符串的长度限制为数字字符？ 例如：我必须将标题长度限制为20 {{ data.title }}。

是否有任何管道或过滤器来限制长度？

Answer 1

将文本截断为角的两种方法。

let str = 'How to truncate text in angular'; 

1.解决方案

{{str | slice:0:6}} 

输出：

how to 

如果要追加片串状后的任何文本0

{{ (str.length>6)? (str | slice:0:6)+'..':(str) }} 

输出：

how to... 

2.解决方案

如果你想创建自定义的截断管

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

@Pipe({ 
name: 'truncate' 
}) 

export class TruncatePipe implements PipeTransform { 

transform(value: string, args: string[]): string { 
    const limit = args.length > 0 ? parseInt(args[0], 10) : 20; 
    const trail = args.length > 1 ? args[1] : '...'; 
    return value.length > limit ? value.substring(0, limit) + trail : value; 
    } 
} 

在标记

{{ str | truncate:[20] }} // or 
{{ str | truncate:[20, '...'] }} // or 

Answer 2

截断管道与可选 PARAMS：

• 限制 - 字符串最大长度
• completeWords - 国旗在最近的完整的单词截断，而不是字符
• 省略号 - 附加尾随后缀

-

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

@Pipe({ 
    name: 'truncate' 
}) 
export class TruncatePipe implements PipeTransform { 
    transform(value: string, limit = 25, completeWords = false, ellipsis = '...') { 
    if (completeWords) { 
     limit = value.substr(0, 13).lastIndexOf(' '); 
    } 
    return `${value.substr(0, limit)}${ellipsis}`; 
    } 
} 

不要忘记添加一个模块条目。

@NgModule({ 
    declarations: [ 
    TruncatePipe 
    ] 
}) 
export class AppModule {} 

使用

示例串：

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*** --> 

Answer 3

如果你想通过一个字数的截断并添加省略号你可以使用这个功能离子：

truncate(value: string, limit: number = 40, trail: String = '…'): string { 
    let result = value || ''; 

    if (value) { 
    const words = value.split(/\s+/); 
    if (words.length > Math.abs(limit)) { 
     if (limit < 0) { 
     limit *= -1; 
     result = trail + words.slice(words.length - limit, words.length).join(' '); 
     } else { 
     result = words.slice(0, limit).join(' ') + trail; 
     } 
    } 
    } 

    return result; 
} 

例子： https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

如果你想通过几封信截断，但不要剪出来的话使用本：

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 5, '…') 
> "Bacon ipsum dolor amet sirloin…" 

取自：

truncate(value: string, limit = 25, completeWords = true, ellipsis = '…') { 
    let lastindex = limit; 
    if (completeWords) { 
    lastindex = value.substr(0, limit).lastIndexOf(' '); 
    } 
    return `${value.substr(0, limit)}${ellipsis}`; 
} 

实施例：

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, true, '…') 
> "Bacon ipsum dolor…" 

truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 19, false, '…') 
> "Bacon ipsum dolor a…"