angular2添加“阅读更多”链接到自定义管道 [英] angular2 add "Read More" link to custom pipe

问题描述

我已经创建了一个自定义摘要管道类，它可以正常工作，但是我想在子字符串的末尾添加一个更多的链接。.单击显示的所有内容。

> 从'@ angular / core'导入{Pipe，PipeTransform};
@Pipe（{name：'summary'}）
导出类SummaryPipe实现PipeTransform {
transform（value：string，maxWords：number）{
if（value）
return value.substring（0，maxWords）+ ...< a href ='＃'（click）='getAllText（）'>阅读更多< / a>;
}
getAllText（）{
//返回this.value; ？
}
}


我需要填写我知道的fucn，但我需要问什么更有效，更真实的方法来实现此目的？

解决方案

最佳实践可能是将管道逻辑与更多按钮。

此外，我建议您使用缩短管道来替换 ng-pipes 模块： https://github.com/danrevah / ng-pipes＃shorten

使用示例：

在控制器中：

  this.longStr ='这里有些长字符串'; 
 this.maxLength = 3 
 this.showAll =（）=> this.maxLength = this.longStr.length; 
  

视图中：

 < p> {{longStr |缩短：maxLength：‘...’}}< / p> 
< div * ngIf = longStr.length> maxLength（click）= showAll（）>阅读更多< / div> 
  

I have created custome summary pipe class it works fine but I want to add a read more link end of substring.. when clicked all content shown.

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; ?
    }
}

I need to fill fucn I know but I need to ask what is more efficient and true way of accomplish this?

解决方案

A best practice would probably be to separate the pipe logic from the 'read more' button.

Also, I would suggest you to use shorten pipe from ng-pipes module: https://github.com/danrevah/ng-pipes#shorten

Example of usage:

In the controller:

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

In the view:

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

这篇关于angular2添加“阅读更多”链接到自定义管道的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！