Wie schneide ich Text in Angular2 ab?

124

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?

ihm
quelle

Antworten:

378

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 {}
Ketan Akbari
quelle
Welche Lösung ist gut in der Leistung. Lösung 1 oder Lösung 2. Ich denke, Lösung 1 hat eine gute Leistung.
Rigin Oommen
Vielleicht möchten Sie der return-Anweisung eine Nullprüfung hinzufügen. In meinem Fall habe ich eine leere Zeichenfolge übergeben und meine App stürzte ab. return value && value.length > limit ? value.substring(0, limit) + trail : value;
Wildhammer
@ketan: Sir, ich habe beide Lösungen ausprobiert. Es funktioniert perfekt, aber mein Szenario ist anders. Wir haben zunächst 50 Zeichen und mehr Text wird angezeigt, nachdem Sie auf den Link "Mehr lesen" geklickt haben.
Kapil Soni
In Lösung 2 transform(value: string, args: string[]): stringsollte sein, transform(value: string, args: any[]): stringda das erste Argument, das der Pipe gegeben wird, eine Zahl ist.
MattOnyx
Hallo Ketan, kannst du das bitte beantworten: stackoverflow.com/questions/61040964/…
Tanzeel
83

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*** -->
Timothy Perez
quelle
7
Vielen Dank für die Bereitstellung einer Pfeife, limit = value.substr(0, 13).lastIndexOf(' ');sollte aber sein limit = value.substr(0, limit).lastIndexOf(' ');.
Tomnar
1
Sie können auch so etwas hinzufügen: if (!value) { return ''; }und if (value.length <= limit) { return value; }
Jarek Szczepański
Ich musste es auch zum Exportteil von @ngModule hinzufügen, damit es funktioniert.
Ich
@tibi ist wie eine neue Komponente und Sie müssen sie deklarieren (Deklarationsarray), um sie verwenden zu können.
Calios
1
Um zu vermeiden, dass Auslassungspunkte an unnötige Werte angehängt werden, fügen Sie `if (value.length <limit) {return value; } else {return ${value.substr(0, limit)}${ellipsis}; } `
jabu.hlong
13

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

Shailesh Ladumor
quelle
2
Dies. Tausendmal so!
Brunner
perfekt für Barrierefreiheit
Antonello Pasella
4

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

Kerim092
quelle
es ist hier zu bewegen: npmjs.com/package/@yellowspot/ng-truncate
tibi
Meine Tests sind nach dem Import fehlgeschlagen. Scherz hatte einige Kabelfehler.
Tibi
@ Tibi welche Art von Fehlern? Für mich war es sehr einfach, installieren> in Modul importieren> in seinen Komponenten verwenden ..
Kerim092
3

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

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

Ignacio Ara
quelle
1

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…"
Gianfranco P.
quelle
1

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}`;
}
}
unos baghaii
quelle
0

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