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

【问题标题】：How to return function name in row html in pipe and trigger it如何在管道中的行html中返回函数名并触发它
【发布时间】：2021-08-06 13:07:21
【问题描述】：

我正在尝试创建一个多角度的管道，在使用管道时呈现自定义 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）
如果有更好的方法请告诉我

【问题讨论】：

stackoverflow.com/questions/37819312/…
如果数据已格式化，我需要将数据格式化为该管道和基础，我需要呈现read more button

标签： angular pipe angular-pipe

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试 Test.component.html

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

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

【讨论】：