如何在管道中的行 html 中返回函数名称并触发它

问题描述

我正在尝试以角度创建一个 read more 管道，在使用管道时呈现自定义 HTML。在自定义 HTML 中，我可以通过在管道中传递它来访问组件中的方法吗？

readMorePipe.ts

import { Pipe,PipeTransform } from '@angular/core';

@Pipe({
  name: 'readMore'
})
export class ReadMorePipe implements PipeTransform {

  transform(text: string,length: number = 20,showAll: boolean = false,suffix: string = '...'): any {
    if (showAll) {
      return text;
    }
    if (text.split(" ").length > length) {
      text = text.split(" ").splice(0,length).join(" ") + suffix;
      return `<button (click)="triggerReadMore()" style="color:red;"> //trying to pass function to the component and that function defined in that component 
      ${text}
      </button>`
    }

    return text;
  }

}

Test.component.ts

 <span innerHTML="{{someText | readMore:3:showAll}}"></span>

Test.component.ts

public showAll: boolean = false;
someText: string = "text text text text";
triggerReadMore(){
console.log("do something")
}

问题：

渲染 HTML button
我们可以以某种方式将函数名称传递给组件吗？（也许使用 javascript）
如果有更好的方法请告诉我

解决方法

据我所知，你不能这样做。管道的主要目标是以您需要的任何方式格式化数据。如果您需要呈现 HTML 并将侦听器传递给它，Component 会更适合。

无论如何，您需要将回调传递给 Component 或 Pipe 以在路上的某个地方指定它。

试试Test.component.html

<span [outerHTML]="someText | readMore:3:'showAll'"></span>

注意：但是，使用 directive 进行这些操作会更有用。

angular angular angular-pipe pipe