需要输入 angular 个管道

Question

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

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

它工作正常，我想为管道添加更多功能。一旦用户点击文本，省略号就会消失，全文就会显示出来。我应该如何修改管道？

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

Answer 1

一种方法是将您的 Pipe 配置为接受字符长度作为输入，然后您在模板中决定是要 trim 将文本的长度设置为更短的长度还是传递 [=34= 的大小] 如果您想保留全文。

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

在您的模板中，您可以决定要为 trim 大小传递的参数值。在下面的示例中，单击 div 将显示 'name' 的完整值，再次单击将显示 trimmed 文本。

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

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

</div>

现在，您的模板中有多个这样的变量，例如 'name' - 您可以在组件中为每个变量添加一个属性，以跟踪您是要显示全长还是 trimmed文本。但这可能变得难以管理。

我上面所做的是使用模板引用变量 #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;
      }
    }
}

需要输入 angular 个管道

Need input on angular pipes

angular

angular-pipe