Réponses:
Deux façons de tronquer le texte en angulaire.
let str = 'How to truncate text in angular';
1. Solution
{{str | slice:0:6}}
Production:
how to
Si vous souhaitez ajouter du texte après la chaîne de tranche comme
{{ (str.length>6)? (str | slice:0:6)+'..':(str) }}
Production:
how to...
2. Solution (Créer un tube personnalisé)
si vous souhaitez créer un tube tronqué personnalisé
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;
}
}
Dans le balisage
{{ str | truncate:[20] }} // or
{{ str | truncate:[20, '...'] }} // or
N'oubliez pas d'ajouter une entrée de module.
@NgModule({
declarations: [
TruncatePipe
]
})
export class AppModule {}
return value && value.length > limit ? value.substring(0, limit) + trail : value;
transform(value: string, args: string[]): string
devrait être transform(value: string, args: any[]): string
puisque le premier argument donné au tube est un nombre.
Tronquer le tuyau avec des paramètres facultatifs :
-
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;
}
}
N'oubliez pas d'ajouter une entrée de module.
@NgModule({
declarations: [
TruncatePipe
]
})
export class AppModule {}
Usage
Exemple de chaîne:
public longStr = 'A really long string that needs to be truncated';
Balisage:
<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(' ');
devrait être limit = value.substr(0, limit).lastIndexOf(' ');
cependant.
if (!value) { return ''; }
et if (value.length <= limit) { return value; }
${value.substr(0, limit)}${ellipsis}
; } `
Vous pouvez tronquer du texte basé sur CSS. Il permet de tronquer un texte basé sur la largeur et non le caractère fixe.
Exemple
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>
Remarque: ce code utilise plein pour une ligne pas pour plus d'une.
La solution de Ketan est la meilleure si vous voulez le faire par Angular
J'ai utilisé ce module ng2 truncate , son module d'importation assez simple et vous êtes prêt à partir ... dans {{data.title | tronquer: 20}}
Voici une approche alternative utilisant un interface
pour décrire la forme d'un objet d'options à passer via le pipe
dans le balisage.
@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;
}
Puis dans votre balisage:
{{someText | textContentTruncate:{sliceStart: 0, sliceEnd: 50, append: '...'} }}
Très simple à l' aide de tuyaux tranche (de la pipe angulaire de base), comme vous avez demandé data.title
:
{{ data.title | slice:0:20 }}
À partir de la documentation commune Angular https://angular.io/api/common/SlicePipe
Si vous souhaitez tronquer par un certain nombre de mots et ajouter des points de suspension, vous pouvez utiliser cette fonction:
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;
}
Exemple:
truncate('Bacon ipsum dolor amet sirloin tri-tip swine', 5, '…')
> "Bacon ipsum dolor amet sirloin…"
extrait de: https://github.com/yellowspot/ng2-truncate/blob/master/src/truncate-words.pipe.ts
Si vous voulez tronquer par un certain nombre de lettres mais ne coupez pas les mots, utilisez ceci:
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}`;
}
Exemple:
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…"
Je viens d'essayer la réponse @Timothy Perez et j'ai ajouté une ligne
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}`;
}
}
Essayez celui-ci, si vous souhaitez tronquer en fonction de mots au lieu de caractères tout en permettant également à une option de voir le texte complet.
Je suis venu ici à la recherche d'une solution Read More basée sur des mots , partageant la coutume que Pipe
j'ai fini par écrire.
Tuyau:
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;
}
}
Dans le modèle:
<p [innerHTML]="description | readMore:30:showAll"></p>
<button (click)="triggerReadMore()" *ngIf="!showAll">Read More<button>
Composant:
export class ExamplePage implements OnInit {
public showAll: any = false;
triggerReadMore() {
this.showAll = true;
}
}
Dans le module:
import { ReadMorePipe } from '../_helpers/read-more.pipe';
@NgModule({
declarations: [ReadMorePipe]
})
export class ExamplePageModule {}