如何解决如何在管道中的行 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 并将侦听器传递给它,Component
会更适合。
无论如何,您需要将回调传递给 Component
或 Pipe
以在路上的某个地方指定它。
试试Test.component.html
<span [outerHTML]="someText | readMore:3:'showAll'"></span>
注意:但是,使用 directive 进行这些操作会更有用。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。