有没有办法可以将字符串的长度限制为数字字符？
例如：我必须将标题长度限制为20 {{ data.title }}。
是否有管道或过滤器来限制长度？
答案 0 :(得分：258)
将文本截断为角度的两种方法。
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: string[]): 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 {}
答案 1 :(得分：54)
使用可选参数截断管道：
-
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.substr(0, limit)}${ellipsis}`;
}
}
不要忘记添加模块条目。
@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*** -->
答案 2 :(得分：4)
像这样：
{{ data.title | slice:0:20 }}
如果你想要省略号，这里有一个解决方法
{{ data.title | slice:0:20 }}...
答案 3 :(得分：3)
我一直在使用这个模块ng2 truncate，它非常简单，导入模块，你准备好了... {{data.title |截断：20}}
答案 4 :(得分：3)
您可以基于CSS截断文本。它有助于根据宽度截断文本而不是固定字符。
示例
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 dummy 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>
注意：此代码在一行中全部使用。
如果要通过Angular做到，Ketan的解决方案是最好的
答案 5 :(得分：3)
使用切片管（角的芯管）非常简单，就像您要求的data.title：
{{ data.title | slice:0:20 }}
来自Angular通用文档https://angular.io/api/common/SlicePipe
答案 6 :(得分：1)
如果要截断字数并添加省略号，可以使用此功能：
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…"
答案 7 :(得分：1)
这是使用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: '...'} }}
答案 8 :(得分：0)
只需尝试@Timothy Perez回答并添加一行
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}`;
}
}
答案 9 :(得分：0)
如果要基于单词而不是字符进行截断，请尝试执行此操作，同时还可以选择查看全文。
来这里寻找基于文字的阅读更多解决方案，并分享我最终写的自定义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 {}