Як урізати текст у Angular2?

Чи є спосіб я обмежити довжину рядка числом символів? наприклад: Я повинен обмежити довжину заголовка до 20 {{ data.title }}.

Чи є труба чи фільтр для обмеження довжини?

Два способи врізання тексту в кутовий.

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

1. Рішення

  {{str | slice:0:6}}

Вихід:

   how to

Якщо ви хочете додати будь-який текст після рядка зрізу типу

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

Вихід:

 how to...

2. Рішення (Створення спеціальної труби)

якщо ви хочете створити власну обрізну трубу

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

У розмітці

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

Не забудьте додати модульний запис.

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

Обрізати трубу за допомогою додаткових парам:

• limit - максимальна довжина рядка
• completeWords - Позначте, щоб урізати найближче повне слово замість символу
• еліпсис - доданий трейлінг-суфікс

-

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

Не забудьте додати модульний запис.

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

Використання

Приклад рядка:

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

Розмітка:

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

Ви можете урізати текст на основі CSS. Це допомагає урізати текст на основі ширини не виправити символів.

Приклад

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>

Примітка. Цей код використовується повним для одного рядка, не більше одного.

Рішення Ketan найкраще, якщо ви хочете зробити це за допомогою Angular

Я використовував цей модуль ng2 усікання , його досить просто, імпортний модуль і ви готові до роботи ... в {{data.title | усікання: 20}}

Ось альтернативний підхід, що використовує interfaceдля опису форми об'єкта параметрів, що передається через 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;
}

Потім у своїй розмітці:

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

Дуже просто, використовуючи зрізну трубу (кутовий сердечник), як ви просили data.title:

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

Із загальних документів Angular https://angular.io/api/common/SlicePipe

Якщо ви хочете відрізати кількість слів і додати еліпсис, ви можете скористатися цією функцією:

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

Приклад:

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

Якщо ви хочете скоротити кількість літер, але не вирізати слова, скористайтеся цим:

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

Приклад:

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

Щойно спробував відповісти @Timothy Perez і додав рядок

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

до

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

Спробуйте це, якщо ви хочете усікати на основі слова замість символів, дозволяючи також бачити повний текст.

Сюди прийшли шукати рішення Read More на основі слів , поділившись користувачем, який Pipeя закінчив писати.

Труба:

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

}

У шаблоні:

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

Компонент:

export class ExamplePage implements OnInit {

    public showAll: any = false;

    triggerReadMore() {
        this.showAll = true;
    }

}

У модулі:

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

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