Jak obciąć tekst w Angular2?

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ść?

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

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

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

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

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: '...'} }}

Bardzo proste użycie rurki tnącej (rura rdzeniowa kątowa), zgodnie z zapytaniem data.title:

{{ data.title | slice:0:20 }}

Z popularnych dokumentów Angular https://angular.io/api/common/SlicePipe

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

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

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