जवाबों:
टेक्स्ट को कोणीय में विभाजित करने का दो तरीका।
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के बाद से पाइप को दिया पहला तर्क एक संख्या है।
वैकल्पिक पैरा के साथ ट्रंकसेट पाइप :
-
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}; } `
आप सीएसएस पर आधारित पाठ को काट सकते हैं। यह पाठ पर आधारित चौड़ाई को ठीक नहीं करने के लिए छोटा करने में मदद करता है।
उदाहरण
सीएसएस
.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>
नोट: यह कोड एक से अधिक के लिए नहीं एक लाइन के लिए पूर्ण का उपयोग करें।
यदि आप कोणीय द्वारा करना चाहते हैं तो केतन का समाधान सबसे अच्छा है
मैं इस मॉड्यूल ng2 truncate का उपयोग कर रहा हूं , इसके बहुत आसान, आयात मॉड्यूल और यू जाने के लिए तैयार हैं ... {{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
यदि आप कई शब्दों को तोड़ना चाहते हैं और एक दीर्घवृत्त जोड़ते हैं, तो आप इस फ़ंक्शन का उपयोग कर सकते हैं:
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 {}