Angular2'de metin nasıl kesilir?


126

Dizenin uzunluğunu bir sayı karakteriyle sınırlamanın bir yolu var mı? örneğin: Bir başlık uzunluğunu 20 ile sınırlamam gerekiyor {{ data.title }}.

Uzunluğu sınırlamak için herhangi bir boru veya filtre var mı?

Yanıtlar:


380

Metni açısal olarak kesmenin iki yolu.

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

1. Çözüm

  {{str | slice:0:6}}

Çıktı:

   how to

Dilim dizesinden sonra herhangi bir metni eklemek isterseniz

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

Çıktı:

 how to...

2. Çözüm (Özel boru oluştur)

özel kesik boru oluşturmak istiyorsanız

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

İşaretlemede

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

Modül girişi eklemeyi unutmayın.

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

Performansta hangi çözüm iyidir. Çözüm 1 veya çözüm 2. Çözüm 1'in performans açısından iyi olduğunu düşünüyorum.
Rigin Oommen

return ifadesine boş bir onay eklemek isteyebilirsiniz, benim durumumda boş bir dizge geçiyordum ve bu uygulamamın çökmesine neden oluyordu. return value && value.length > limit ? value.substring(0, limit) + trail : value;
Wildhammer

@ketan: efendim, her iki çözümü de mükemmel çalıştığını denedim ama benim senaryom farklı. 50 karakter gösterdik ve tıkladıktan sonra daha fazla metin gösterilecek, daha fazla bağlantı oku, bu yüzden bana bunun mümkün olduğunu söyle?
Kapil soni

Çözelti 2'de, transform(value: string, args: string[]): stringolmalıdır transform(value: string, args: any[]): stringboru verilen ilk parametre bir sayı olduğu.
MattOnyx

Merhaba Ketan, lütfen
şuna

83

Opsiyonel parametrelerle Boru Kes:

  • limit - dize maksimum uzunluğu
  • completeWords - Karakter yerine en yakın tam kelimede kırpmak için işaretleyin
  • üç nokta - ekli son ek

-

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

Modül girişi eklemeyi unutmayın.

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

kullanım

Örnek Dize:

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

İşaretleme:

  <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
Teşekkür bir boru sağlamak için, limit = value.substr(0, 13).lastIndexOf(' ');olmalıdır limit = value.substr(0, limit).lastIndexOf(' ');olsa.
Tomnar

1
Ayrıca buna benzer bir şey de ekleyebilirsiniz: if (!value) { return ''; }ve if (value.length <= limit) { return value; }
Jarek Szczepański

Çalışması için @ngModule'un dışa aktarma kısmına da eklemem gerekiyordu. neden emin değilim
tibi

@tibi yeni bir bileşen gibi ve onu kullanabilmek için (bildirimler dizisi) tanımlamanız gerekiyor.
calios

1
Gereksiz değerlere üç nokta eklemekten kaçınmak için if (değer.length <limit) {dönüş değeri; } else {return ${value.substr(0, limit)}${ellipsis}; } `
jabu.hlong

15

CSS'ye göre metni kısaltabilirsiniz. Metni temel alan karakterin düzeltilmesine değil, kısaltılmasına yardımcı olur.

Misal

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>

Not: Bu kod, birden fazla değil, bir satır için tam kullanılır.

Ketan'ın Çözümü, Angular ile yapmak istiyorsanız en iyisidir


2
Bu. Bin kere bunun!
brunner

Erişilebilirlik için mükemmel
Antonello Pasella

4

Bu modülü ng2 truncate kullanıyorum , oldukça kolay, içe aktarma modülü ve gitmeye hazırsınız ... {{data.title | kesik: 20}}


buraya taşınıyor
tibi

bunu içe aktardıktan sonra testlerim başarısız oldu. jest'in bazı kablolu hataları vardı.
tibi

@tibi ne tür hatalar? benim için çok basitti, yükle> modülde içe aktar> bileşenlerinde kullan ..
Kerim092

3

Burada , işaretlemedeki interfacearacılığıyla geçirilecek bir options nesnesinin şeklini açıklamak için an kullanan alternatif bir yaklaşım var pipe.

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

Ardından işaretlemenizde:

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


1

Birkaç kelimeyle kesmek ve üç nokta eklemek istiyorsanız, bu işlevi kullanabilirsiniz:

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

Misal:

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

https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts adresinden alınmıştır

Birkaç harfle kısaltmak istiyor ama kelimeleri kesip çıkarmıyorsanız şunu kullanın:

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

Misal:

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

@Timothy Perez cevabını denedim ve bir satır ekledi

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

için

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

Karakterler yerine Kelimelere göre kısaltmak ve aynı zamanda tam metni görmek için bir seçeneğe izin vermek istiyorsanız, bunu deneyin.

Yazdığım özelliği paylaşarak, kelimelere dayalı bir Read More çözümü arayarak buraya geldim Pipe.

Boru:

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

}

Şablonda:

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

Bileşen:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

Modülde:

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

@NgModule({
  declarations: [ReadMorePipe]
})
export class ExamplePageModule {}
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.