Bagaimana cara memotong teks di Angular2?

Apakah ada cara agar saya bisa membatasi panjang string menjadi karakter angka? misalnya: Saya harus membatasi panjang judul menjadi 20 {{ data.title }}.

Apakah ada pipa atau filter untuk membatasi panjangnya?

Dua cara untuk memotong teks menjadi bersudut.

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

1. Solusi

  {{str | slice:0:6}}

Keluaran:

   how to

Jika Anda ingin menambahkan teks apa pun setelah string irisan seperti

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

Keluaran:

 how to...

2. Solusi (Buat pipa khusus)

jika Anda ingin membuat pipa potong kustom

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

Di Markup

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

Jangan lupa untuk menambahkan entri modul.

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

Truncate Pipe dengan parameter opsional :

• limit - panjang maksimal string
• completeWords - Bendera untuk memotong kata lengkap terdekat, bukan karakter
• elipsis - ditambahkan akhiran akhiran

-

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

Jangan lupa untuk menambahkan entri modul.

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

Pemakaian

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

Anda dapat memotong teks berdasarkan CSS. Ini membantu untuk memotong teks berdasarkan lebar bukan memperbaiki karakter.

Contoh

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>

Catatan: kode ini menggunakan penuh untuk satu baris tidak untuk lebih dari satu.

Solusi Ketan adalah yang terbaik jika Anda ingin melakukannya dengan Angular

Saya telah menggunakan modul ini ng2 truncate , ini cukup mudah, impor modul dan Anda siap untuk pergi ... di {{data.title | potong: 20}}

Berikut adalah pendekatan alternatif menggunakan interfaceuntuk mendeskripsikan bentuk objek opsi yang akan diteruskan melalui pipedi markup.

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

Kemudian di markup Anda:

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

Sangat sederhana menggunakan slice pipe (pipa inti bersudut), seperti yang Anda minta data.title:

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

Dari dokumen umum Angular https://angular.io/api/common/SlicePipe

Jika Anda ingin memotong sejumlah kata dan menambahkan elipsis, Anda dapat menggunakan fungsi ini:

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

Contoh:

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

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

Jika Anda ingin memotong beberapa huruf tetapi tidak memotong kata, gunakan ini:

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

Contoh:

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

Baru saja mencoba jawaban @Timothy Perez dan menambahkan baris

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

untuk

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

Coba yang ini, jika Anda ingin memotong berdasarkan Kata-kata alih-alih karakter sambil juga mengizinkan opsi untuk melihat teks lengkap.

Datang ke sini mencari solusi Baca Lebih Lanjut berdasarkan kata-kata , berbagi kebiasaan yang Pipeakhirnya saya tulis.

Pipa:

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

}

Dalam Template:

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

Komponen:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Dalam Modul:

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

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