是否有一种方法可以将字符串的长度限制为数字字符? 例如:我必须限制标题长度为20 {{data。标题}}。
是否有管道或过滤器限制长度?
是否有一种方法可以将字符串的长度限制为数字字符? 例如:我必须限制标题长度为20 {{data。标题}}。
是否有管道或过滤器限制长度?
当前回答
我一直在使用这个模块ng2 truncate,它很简单,导入模块和u已经准备好了…在{{data。标题| truncate: 20}}
其他回答
是这样的:
{{ data.title | slice:0:20 }}
如果你想要省略号,这里有一个变通方法
{{ data.title | slice:0: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 {}
为了获得更多的灵活性,如果我们想从结尾或开始截断(基于@Nika Kasradze):
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[1], 10) : 20;
const trail = args.length > 1 ? args[3] : '...';
return value.length > limit ? (args[2] === 'start' ? trail : '') + value.substr(args[0], limit) + (args[2] === 'end' ? trail : '') : value;
}
}
如何使用?
{{ myLongText | truncate:[20, myLongText.length-20, 'start', '...'] }}
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:'>>>'] }}
用可选参数截断管道:
Limit - string最大长度 completeWords -标记在最近的完整单词处截断,而不是字符 省略号——附加在后面的后缀
-
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*** -->