是否有一种方法可以将字符串的长度限制为数字字符? 例如:我必须限制标题长度为20 {{data。标题}}。
是否有管道或过滤器限制长度?
是否有一种方法可以将字符串的长度限制为数字字符? 例如:我必须限制标题长度为20 {{data。标题}}。
是否有管道或过滤器限制长度?
当前回答
下面是另一种方法,使用接口来描述要通过标记中的管道传递的选项对象的形状。
@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: '...'} }}
其他回答
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'truncate',
})
export class TruncatePipe implements PipeTransform {
transform(value: string, limit: number, trail = '...'): string {
if (value.length <= limit) {
return value;
}
return value.substring(0, limit - trail.length).replace(/\s+$/, '') + trail;
}
}
{{ str | truncate: 20 }}
{{ str | truncate: 20:'>>>'] }}
如果需要用单词截断:
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'truncateByWords',
})
export class TruncateByWordsPipe implements PipeTransform {
transform(value: string, limit: number, trail = '...'): string {
if (value.length <= limit) {
return value;
}
const substr = value.substring(0, limit - trail.length).split(' ');
const isLastWordFull = value
.split(' ')
.find(w => w === substr[substr.length - 1]);
if (isLastWordFull) {
return substr.join(' ') + trail;
}
return substr.slice(0, -1).join(' ') + trail;
}
}
{{ str | truncateByWords: 20 }}
{{ str | truncateByWords: 20:'>>>'] }}
使用slice pipe (angular的核心管道)非常简单,就像你要求data.title一样:
{{ data.title | slice:0:20 }}
来自Angular通用文档https://angular.io/api/common/SlicePipe
刚刚尝试了@蒂莫西佩雷斯的回答,并添加了一行
if (value.length < limit)
return `${value.substr(0, limit)}`;
to
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}`;
}
}
我一直在使用这个模块ng2 truncate,它很简单,导入模块和u已经准备好了…在{{data。标题| truncate: 20}}
如果你想要截断一些单词并添加一个省略号,你可以使用这个函数:
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…"