จะตัดข้อความใน Angular2 ได้อย่างไร?

มีวิธีที่ฉันสามารถจำกัดความยาวของสตริงเป็นอักขระตัวเลขได้หรือไม่? สำหรับเช่น: ฉันต้อง จำกัด มีความยาวถึง {{ data.title }}20

มีท่อหรือตัวกรองจำกัดความยาวหรือไม่?

สองวิธีในการตัดข้อความเป็นเชิงมุม

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

ตัดท่อด้วยพารามิเตอร์เสริม :

• ขีด จำกัด - ความยาวสูงสุดของสตริง
• คำที่สมบูรณ์ - ตั้งค่าสถานะเพื่อตัดทอนคำที่สมบูรณ์ที่ใกล้ที่สุดแทนที่จะเป็นอักขระ
• จุดไข่ปลา - คำต่อท้ายต่อท้าย

-

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 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 ตอบและเพิ่มไลน์

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

ลองใช้วิธีนี้หากคุณต้องการตัดทอนตาม Words แทนที่จะเป็นอักขระในขณะที่ยังให้ตัวเลือกเพื่อดูข้อความที่สมบูรณ์

มาที่นี่เพื่อค้นหาโซลูชันอ่านเพิ่มเติมตามคำแบ่งปันแบบกำหนดเองที่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 {}