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

선택적 매개 변수로 파이프 자르기 :

• 제한 -문자열 최대 길이
• 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 truncate , 그것의 매우 쉬운, 가져 오기 모듈을 사용하고 있고 u는 갈 준비가되었다 ... in {{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 {}