Jak obciąć tekst w Angular2?


127

Czy istnieje sposób, żebym mógł ograniczyć długość ciągu do znaków liczbowych? na przykład: muszę ograniczyć długość tytułu do 20 {{ data.title }}.

Czy jest jakaś rura lub filtr ograniczający długość?

Odpowiedzi:


380

Dwa sposoby przycinania tekstu do postaci kanciastej.

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

1. Rozwiązanie

  {{str | slice:0:6}}

Wynik:

   how to

Jeśli chcesz dołączyć dowolny tekst po ciągu kawałka, np

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

Wynik:

 how to...

2. Rozwiązanie (utwórz niestandardową rurę)

jeśli chcesz utworzyć niestandardowy obcinany potok

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

@Pipe({
 name: 'truncate'
})

export class TruncatePipe implements PipeTransform {

transform(value: string, args: any[]): 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 znacznikach

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

Nie zapomnij dodać wpisu do modułu.

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

Które rozwiązanie jest dobre pod względem wydajności. Rozwiązanie 1 lub rozwiązanie 2. Myślę, że rozwiązanie 1 jest dobre pod względem wydajności.
Rigin Oommen

możesz dodać zerową kontrolę do instrukcji return, w moim przypadku przekazywałem pusty ciąg i powodował awarię mojej aplikacji. return value && value.length > limit ? value.substring(0, limit) + trail : value;
Wildhammer

@ketan: proszę pana. Wypróbowałem oba rozwiązania, które działają idealnie, ale mój scenariusz jest inny, początkowo pokazujemy 50 znaków, a więcej tekstu zostanie wyświetlonych po kliknięciu linku przeczytaj więcej, więc powiedz mi, że jest to możliwe z powyższym?
Kapil soni

W rozwiązaniu 2 transform(value: string, args: string[]): stringpowinno być, transform(value: string, args: any[]): stringponieważ pierwszym argumentem podanym do potoku jest liczba.
MattOnyx

Cześć Ketan, czy możesz odpowiedzieć na to pytanie: stackoverflow.com/questions/61040964/…
Tanzeel

84

Obetnij rurę z opcjonalnymi parametrami :

  • limit - maksymalna długość łańcucha
  • completeWords - flaga do obcięcia na najbliższym pełnym wyrazie zamiast znaku
  • ellipsis - dołączany końcowy sufiks

-

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, limit).lastIndexOf(' ');
    }
    return value.length > limit ? value.substr(0, limit) + ellipsis : value;
  }
}

Nie zapomnij dodać wpisu do modułu.

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

Stosowanie

Przykładowy ciąg:

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

Narzut:

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

7
Dzięki za dostarczenie fajki, limit = value.substr(0, 13).lastIndexOf(' ');powinno być limit = value.substr(0, limit).lastIndexOf(' ');.
Tomnar

1
Można też dodać coś takiego: if (!value) { return ''; }i if (value.length <= limit) { return value; }
Jarek Szczepański

musiałem dodać go również do eksportowej części @ngModule, aby działał. nie wiem dlaczego
tibi

@tibi jest jak nowy komponent i musisz go zadeklarować (tablica deklaracji), aby go użyć.
calios

1
Aby uniknąć dodawania wielokropka do niepotrzebnych wartości, dodaj użyj `if (wartość.length <limit) {zwracana wartość; } else {powrót ${value.substr(0, limit)}${ellipsis}; } `
jabu.hlong

16

Możesz obcinać tekst na podstawie CSS. Pomaga obcięcie tekstu w oparciu o szerokość, a nie ustalenie znaku.

Przykład

CSS

.truncate {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

.content {
            width:100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

HTML

<div class="content">
    <span class="truncate">Lorem Ipsum is simply dummied text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</span>
</div>

Uwaga: ten kod używa pełnego dla jednej linii, nie więcej niż jednego.

Rozwiązanie Ketan jest najlepsze, jeśli chcesz to zrobić przez Angular


2
To. Tysiąc razy to!
brunner

idealny dla dostępności
Antonello Pasella

4

Używam tego modułu ng2 truncate , jest to całkiem łatwy moduł importu i jesteś gotowy do pracy ... w {{data.title | obcięcie: 20}}


to jest przeniesienie tutaj: npmjs.com/package/@yellowspot/ng-truncate
tibi

moje testy zakończyły się niepowodzeniem po zaimportowaniu tego. miał kilka błędów przewodowych.
tibi

@tibi jakie błędy? jak dla mnie to było bardzo proste, zainstaluj> importuj w module> użyj w jego komponentach ..
Kerim092

3

Oto alternatywne podejście interfacedo opisania kształtu obiektu opcji, który ma zostać przekazany za pośrednictwem pipeznacznika.

@Pipe({
  name: 'textContentTruncate'
})
export class TextContentTruncatePipe implements PipeTransform {

  transform(textContent: string, options: TextTruncateOptions): string {
    if (textContent.length >= options.sliceEnd) {
      let truncatedText = textContent.slice(options.sliceStart, options.sliceEnd);
      if (options.prepend) { truncatedText = `${options.prepend}${truncatedText}`; }
      if (options.append) { truncatedText = `${truncatedText}${options.append}`; }
      return truncatedText;
    }
    return textContent;
  }

}

interface TextTruncateOptions {
  sliceStart: number;
  sliceEnd: number;
  prepend?: string;
  append?: string;
}

Następnie w swoim znaczniku:

{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}


1

Jeśli chcesz skrócić o kilka słów i dodać wielokropek, możesz użyć tej funkcji:

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 skrócić o kilka liter, ale nie wycinaj słów, użyj tego:

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

1

Właśnie wypróbowałem odpowiedź @Timothy Perez i dodałem linię

if (value.length < limit)
   return `${value.substr(0, limit)}`;

do

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

@Pipe({
  name: 'truncate'
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit = 25, completeWords = false, ellipsis = '...') {

   if (value.length < limit)
   return `${value.substr(0, limit)}`;

   if (completeWords) {
     limit = value.substr(0, limit).lastIndexOf(' ');
   }
   return `${value.substr(0, limit)}${ellipsis}`;
}
}

0

Spróbuj tego, jeśli chcesz obcinać na podstawie słów zamiast znaków, jednocześnie umożliwiając wyświetlenie całego tekstu.

Przyszedłem tutaj, szukając rozwiązania Czytaj więcej w oparciu o słowa , dzieląc się niestandardowym Pipe, który napisałem.

Rura:

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

@Pipe({
  name: 'readMore'
})
export class ReadMorePipe implements PipeTransform {

  transform(text: any, length: number = 20, showAll: boolean = false, suffix: string = '...'): any {

    if (showAll) {
      return text;
    }

    if ( text.split(" ").length > length ) {

      return text.split(" ").splice(0, length).join(" ") + suffix;
    }

    return text;
  }

}

W szablonie:

<p [innerHTML]="description | readMore:30:showAll"></p>
<button (click)="triggerReadMore()" *ngIf="!showAll">Read More<button>

Składnik:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

W module:

import { ReadMorePipe } from '../_helpers/read-more.pipe';

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.