Jak przyciąć tekst w Angular2?

Question

Czy istnieje sposób, że mogę ograniczyć długość łańcucha do liczby znaków? dla np .: muszę ograniczyć długość tytułu do 20 {{ data.title }}.

Czy istnieje jakakolwiek rura lub filtr w celu ograniczenia długości?

Answer 1

Dwa sposoby obcięcia tekstu na kanciaste.

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

1. Rozwiązanie

{{str | slice:0:6}} 

wyjściowa:

how to 

Jeśli chcesz dołączyć dowolny tekst po slice ciąg jak

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

wyjściowa:

how to... 

2. Rozwiązanie

jeśli chcesz tworzyć niestandardowe obciąć rurę

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; 
    } 
} 

w Markup

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

Answer 2

Obetnij rur z opcjonalnych params:

• granica - łańcuch o długości max
• completeWords - Flag obciąć przy najbliższej pełnej wyrazu, zamiast znak
• ellipsis - załączonych spływu przyrostek

-

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}`; 
    } 
} 

Nie zapomnij dodać wpis modułu.

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

Wykorzystanie

Przykład String:

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

Markup:

<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

Jeśli chcesz obciąć przez liczby słów i dodać wielokropek cię może korzystać z tej funkcji jonowy:

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; 
} 

Przykład:

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

zaczerpnięte z: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Jeśli chcesz obciąć przez liczby liter ale nie wyciąć słowa z zastosowania tej :

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}`; 
} 

przykład:

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…"