Angular2でテキストを切り捨てる方法は？

文字列の長さを数字に制限する方法はありますか？たとえば：タイトルの長さを20に制限する必要があります{{ data.title }}。

長さを制限するパイプやフィルターはありますか？

テキストを角度に切り詰める2つの方法。

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>

注：このコードは、1行ではなく完全な1行を使用します。

ケタンのソリューションは、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: '...'} }}

あなたが求めたように、スライスパイプ（Angularのコアパイプ）を使用すると非常に簡単ですdata.title：

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

Angular common docs 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の回答を試して、1行追加しました

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