需要输入角管答案

【问题标题】：Need input on angular pipes需要输入角管
【发布时间】：2018-07-10 01:15:07
【问题描述】：

网站上的长字符串达到一定数量后必须有省略号。我创建了以下角管

export class FormatString implements PipeTransform {

 transform(widgetString1: string): string {
     const maxWords = 20;
     const ellipsis = '...';
     if (widgetString1.length > 10) {
         return widgetString1.substring(0, maxWords) + ellipsis;
     } else {
         return widgetString1;
     }
    }

管道在 HTML 中是这样使用的

<div class="text-nowrap ellipsis" *ngIf="max[i]=== 65">
{{item.message | formatString}}

它工作正常，我想为管道添加更多功能。用户单击文本后，省略号应该消失，并且应该显示全文。我应该如何修改管道？

顺便说一句，使用管道是理想的，所以我可以在应用程序的任何地方使用它

【问题讨论】：

前段时间有同样的问题，在这里找到了答案：stackoverflow.com/questions/40003649/…
在构造函数中，这个家伙正在使用 pipe1 和 pipe2。它们不存在。您是否必须通过@pipes 创建另外两个管道？？

标签： angular angular-pipe

【解决方案1】：

一种方法可以配置您的管道以接受字符长度作为输入，并且您在模板中决定是否要将文本修剪为更短的长度，或者如果您想保留全文，则传递“名称”的大小.

@Pipe({name: 'formatString'})
export class FormatString implements PipeTransform {
 transform(text: string, trimTo: number): string {
     const ellipsis = '...';
     if (trimTo && text.length > trimTo) {
         return text.substring(0, trimTo) + ellipsis;
     } else {
         return text;
     }
  }
}

在您的模板中，您可以决定为修剪尺寸传递的参数值是什么。在下面的示例中，单击 div 将显示 'name' 的完整值，再次单击将显示修剪后的文本。

<div class="text-nowrap ellipsis" 
         (click)="nameDiv.displayFullText = !nameDiv.displayFullText" #nameDiv>

  {{name | formatString:(nameDiv.displayFullText ? name.length : 5) }}  

</div>

现在，您的模板中有多个此类变量，例如“名称” - 您可以在组件中为每个变量添加一个属性，以跟踪您是要显示全长文本还是修剪文本。但这可能会变得难以管理。

我上面所做的是使用模板引用变量#nameDiv 并将标志存储在 div 元素中。这也可能变得难以管理，具体取决于您的看法。

我认为你最好为你的用例定义一个指令。

我们可以定义一个属性指令，我们称之为trim，并为其提供两个输入：displayText 用于显示，maxCharsToDisplay 用于显示不带省略号的最大字符数。

例如，您的模板将是这样的：

<h1 ellipsisText [displayText]="name" [maxCharsToDisplay]='4'>
</h1>

这是指令的实现：

@Directive({
  selector: '[ellipsisText]',
})
export class EllipsisTextDirective implements OnInit {

    @Input()
    displayText: string = "";

    @Input()
    maxCharsToDisplay: number;

    showFullText = false;
    ellipsis = '...';

    constructor(private elr:ElementRef){
    }

    // Display initial text in trimmed form
    ngOnInit() {
       this.elr.nativeElement.innerHTML = this.displayText;
       this.trimText();
    }

    // On click - toggle between full text display and trimmed text display
    @HostListener('click') onClick() {
      this.showFullText = !this.showFullText;

      if (this.showFullText) {
        this.fullText();
      } else {
        this.trimText();
      }
    }

    fullText() {
        this.elr.nativeElement.innerHTML = this.displayText;
    }
    trimText() {
      if (this.displayText.length > this.maxCharsToDisplay) {
        this.elr.nativeElement.innerHTML = 
             this.displayText.substring(0, this.maxCharsToDisplay) + this.ellipsis;
      }
    }
}

【讨论】：