Wie schneide ich Text in Angular2 ab?

Gibt es eine Möglichkeit, die Länge der Zeichenfolge auf eine Anzahl von Zeichen zu beschränken? zum Beispiel: Ich muss eine Titellänge auf 20 begrenzen {{ data.title }}.

Gibt es ein Rohr oder einen Filter, um die Länge zu begrenzen?

Zwei Möglichkeiten, Text in Winkel zu kürzen.

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

1. Lösung

  {{str | slice:0:6}}

Ausgabe:

   how to

Wenn Sie einen Text nach einer Slice-Zeichenfolge wie anhängen möchten

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

Ausgabe:

 how to...

2. Lösung (Benutzerdefiniertes Rohr erstellen)

Wenn Sie eine benutzerdefinierte Pipe abschneiden möchten

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

In Markup

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

Vergessen Sie nicht, einen Moduleintrag hinzuzufügen.

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

Rohr abschneiden mit optionalen Parametern:

• limit - string max length
• completeWords - Flag zum Abschneiden beim nächsten vollständigen Wort anstelle des Zeichens
• Auslassungspunkte - angehängtes nachfolgendes Suffix

- -

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

Vergessen Sie nicht, einen Moduleintrag hinzuzufügen.

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

Verwendung

Beispielzeichenfolge:

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

Sie können Text basierend auf CSS abschneiden. Es ist hilfreich, einen Text basierend auf der Breite und nicht auf dem festen Zeichen abzuschneiden.

Beispiel

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>

Hinweis: Dieser Code wird für eine Zeile nicht für mehr als eine Zeile verwendet.

Ketans Lösung ist am besten geeignet, wenn Sie dies mit Angular tun möchten

Ich habe dieses Modul ng2 abgeschnitten , es ist ziemlich einfach, Importmodul und du bist bereit ... in {{data.title | abschneiden: 20}}

Hier ist ein alternativer Ansatz interface, der die Form eines Optionsobjekts beschreibt, das über das pipeim Markup übergeben werden soll.

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

Dann in Ihrem Markup:

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

Sehr einfach mit Slice Pipe (Winkelkernrohr), wie Sie gefragt haben data.title:

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

Aus Angular Common Docs https://angular.io/api/common/SlicePipe

Wenn Sie eine Anzahl von Wörtern abschneiden und Auslassungspunkte hinzufügen möchten, können Sie diese Funktion verwenden:

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

Beispiel:

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

entnommen aus: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts

Wenn Sie eine Anzahl von Buchstaben abschneiden möchten, aber keine Wörter ausschneiden möchten, verwenden Sie Folgendes :

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

Beispiel:

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

Ich habe gerade versucht, @Timothy Perez zu antworten und eine Zeile hinzugefügt

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

zu

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

Versuchen Sie dies, wenn Sie basierend auf Wörtern anstelle von Zeichen abschneiden möchten und gleichzeitig eine Option zum Anzeigen des vollständigen Textes zulassen möchten.

Kam hierher auf der Suche nach einer Read More-Lösung basierend auf Wörtern und teilte die Gewohnheit, die Pipeich am Ende geschrieben habe.

Rohr:

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

}

In Vorlage:

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

Komponente:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Im Modul:

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

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}