是否可以在 Angular 的 kendo-editor 中以某种方式使用管道?
我的用例如下。我已经实现了将图像从本地机器上传到我自己的端点(如此处所述)。另外,我实现了一个返回图像的 get 端点。因此,我可以使用链接通过src
图像属性检索图像。但是我需要对用户进行身份验证才能调用 get 端点。
我对这个问题的研究:How to intercept the src http request and set headers for it?
引导我找到了一个带有安全管道的解决方案,它将为我运行请求。例如,这篇文章描述了解决方案。
我能够实施解决方案。所以,现在在我的 Angular 模板中,我有:
<img [attr.src]="'http://localhost:44123/image/view/image280820208888.png' | authImage | async" />
图像是通过端点加载的,因为我能够使用身份验证(因为我显式运行 http 请求而不是将其委托给浏览器)。
所以,如果我能够以某种方式添加代码,那将是非常非常棒的
<img [attr.src]="'http://localhost:44123/image/view/image280820208888.png' | authImage | async" />
进入剑道编辑器值并实际看到图像。但我不知道如何在剑道编辑器的值内使用管道。
对于身份验证,我使用带有不记名令牌的标头。
那么,有人可以建议我如何在剑道编辑器中使用管道吗?
预加载图像并将它们作为 base64 存储在剑道编辑器值的 src 中的选项不适合我,因为在我的剑道编辑器值中可能有很多图像,我将值存储为数据库中的字符串。因此,如果我使用 base64,我可能会很快用完空间(因为,我会将所有图像存储在文本中)。
更新
这是我使用指令的尝试。可以看到指令的类被添加到图像中,但警报消息不会触发。
指示:
import { Directive, ElementRef } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Directive({
// tslint:disable-next-line: directive-selector
selector: '.customDownload',
})
export class ImgHandlingDirective {
constructor(
private el: ElementRef<HTMLImageElement>,
private http: HttpClient,
) {
alert("code reached");
}
}
验证该类已添加到图像中:
这是 kendo-editor 组件 api。
该指令本身工作正常。如果我们在<img class="customDownload" />
app.component 的模板中添加 ,那么指令中的代码将会到达并且会触发警报。