angular2 添加 "Read More" link 到自定义管道

Question

我已经创建了客户摘要管道 class 它工作正常但我想添加一个阅读更多 link 子字符串的结尾.. 当点击显示的所有内容时。

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'summary' })
export class SummaryPipe implements PipeTransform {
    transform(value: string, maxWords: number) {
        if (value)
            return value.substring(0, maxWords) +"... <a href='#' (click)='getAllText()'>Read more</a>";
    }
       getAllText() {
        //return this.value; ?
    }
}

我需要填写 fucn 我知道，但我想问一下什么是更有效、更真实的方法来完成这个？

Answer 1

最佳做法可能是将管道逻辑与 'read more' 按钮分开。

此外，我建议您使用 ng-pipes 模块中的 shorten 管道：https://github.com/danrevah/ng-pipes#shorten

用法示例：

在控制器中：

this.longStr = 'Some long string here';
this.maxLength = 3
this.showAll = () => this.maxLength = this.longStr.length;

在视图中：

<p>{{longStr | shorten: maxLength: '...'}}</p>
<div *ngIf="longStr.length > maxLength" (click)="showAll()">Read More</div>

angular2 添加 "Read More" link 到自定义管道

angular2 add "Read More" link to custom pipe

angular2-pipe