如何截斷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…"