উত্তর:
কৌনিকতে পাঠ্য কেটে ফেলার দুটি উপায়।
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 {}
return value && value.length > limit ? value.substring(0, limit) + trail : value;
transform(value: string, args: string[]): stringহওয়া উচিত , transform(value: string, args: any[]): stringযেহেতু পাইপকে দেওয়া প্রথম যুক্তিটি একটি সংখ্যা।
সঙ্গে truncate পাইপ ঐচ্ছিক প্যারাম:
-
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*** -->
limit = value.substr(0, 13).lastIndexOf(' ');হওয়া উচিত limit = value.substr(0, limit).lastIndexOf(' ');।
if (!value) { return ''; }if (value.length <= limit) { return value; }
${value.substr(0, limit)}${ellipsis}; } `
আপনি CSS এর উপর ভিত্তি করে পাঠ্য কেটে ফেলতে পারেন। এটি কোনও পাঠ্য-ভিত্তিক প্রস্থের ঠিক না করা অক্ষরকে ছাঁটাই করতে সহায়তা করে।
উদাহরণ
সিএসএস
.truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.content {
width:100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
এইচটিএমএল
<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>
দ্রষ্টব্য: এই কোডটি এক লাইনের জন্য পূর্ণরূপে একের বেশি নয়।
আপনি যদি কৌণিক দ্বারা এটি করতে চান তবে কেটনের সমাধান ভাল
আমি এই মডিউলটি এনজি 2 কেটেঙ্কেট ব্যবহার করছি , এটির বেশ সহজ, আমদানি মডিউল এবং আপনি যেতে প্রস্তুত ... {{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 }}
কৌনিক সাধারণ ডক্স থেকে https://angular.io/api/common/SlicePipe ipe
আপনি যদি কয়েকটি শব্দ দ্বারা ছাঁটাই করতে চান এবং একটি উপবৃত্ত যোগ করতে পারেন তবে আপনি এই ফাংশনটি ব্যবহার করতে পারেন:
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…"সবেমাত্র টিমোথি পেরেজের উত্তর চেষ্টা করে একটি লাইন যুক্ত করলেন
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}`;
}
}
আপনি যদি কোনও অক্ষরকে না দিয়ে অক্ষরের পরিবর্তে শব্দের উপর ভিত্তি করে ছাঁটাই করতে চান তবে একটি বিকল্পকে সম্পূর্ণ পাঠ্য দেখার অনুমতি দিন।
শব্দের উপর ভিত্তি করে আরও পড়ুন সমাধানের সন্ধানে এখানে এসেছেন , কাস্টমটি ভাগ করে নিলাম 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 {}