是否有一种方法可以将字符串的长度限制为数字字符? 例如:我必须限制标题长度为20 {{data。标题}}。
是否有管道或过滤器限制长度?
是否有一种方法可以将字符串的长度限制为数字字符? 例如:我必须限制标题长度为20 {{data。标题}}。
是否有管道或过滤器限制长度?
当前回答
是这样的:
{{ data.title | slice:0:20 }}
如果你想要省略号,这里有一个变通方法
{{ data.title | slice:0:20 }}...
其他回答
下面是另一种方法,使用接口来描述要通过标记中的管道传递的选项对象的形状。
@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: '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 {}
使用slice pipe (angular的核心管道)非常简单,就像你要求data.title一样:
{{ data.title | slice:0:20 }}
来自Angular通用文档https://angular.io/api/common/SlicePipe
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:'>>>'] }}
两种方法将文本截断成角。
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 {}