是否可以以某种方式在Angular的kendo-editor中使用管道？

问题描述

是否可以在Angular的kendo-editor中使用管道？

我的用例如下。我已经实现了从本地计算机到我自己的端点的图像上传（如here所述）。另外，我实现了一个get端点，该端点返回图像。因此，我可以使用链接通过src图片属性检索图片。但是我需要对用户进行身份验证才能调用get端点。

我对以下问题的研究：How to intercept the src http request and set headers for it?使我找到了使用安全管道的解决方案，它将为我运行请求。例如。 this文章介绍了解决方案。

我能够实施该解决方案。所以，现在当我在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" />

进入kendo编辑器值并实际看到图像。但是我不知道如何在kendo编辑器的值中使用管道。

对于身份验证，我使用带有承载令牌的标头。

那么，有人可以建议我一个想法，如何在kendo编辑器中使用管道吗？

预选图像并将其存储在kendo编辑器值的src中的选项，因为base64不适合我，因为在我的kendo编辑器的值中可能会存储很多图像，并且我存储了值作为数据库中的字符串。因此，如果我使用base64，可能会很快用完空间（因为我会将所有图像存储在文本中）。

更新

Here是我尝试使用指令的尝试。可以看到，该指令的类已添加到图像中，但警报消息不会触发。

指令：

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");
  }
}

验证该类已添加到图像：

Here是kendo编辑器组件api。

指令本身可以正常工作。如果我们将<img class="customDownload" />添加到a​​pp.component模板中，则指令中的代码将到达，并且将触发警报。

解决方法

您可以使用指令，但是图像将被上传两次，一次是本地上传，一次是通过httpClient上传：

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: 'img[src]',})
export class ImgHandlingDirective {
  constructor(
    private el: ElementRef<HTMLImageElement>,private http: HttpClient,) {
    this.el.nativeElement.style.display = 'none';

    const url = this.el.nativeElement.src;

    this.loadImage(url).subscribe(src => {
      this.el.nativeElement.src = src;
      this.el.nativeElement.style.display = 'block';
    });
  }
  private loadImage(url: string): Observable<string> {
    return this.http
      // load the image as a blob
      .get(url,{ responseType: 'blob' }).pipe(
        // create an object url of that blob that we can use in the src attribute
        map(e => URL.createObjectURL(e)),);
  }
}

更新后： 您可以更改uploadImage()函数以通过httpClient

上传

public uploadImage(): void {
  const { src } = this.imageInfo;

  this.http
  // load the image as a blob
  .get(src,{ responseType: 'blob' }).pipe(
    // create an object url of that blob that we can use in the src attribute
    map(e => URL.createObjectURL(e)),).subscribe(() => {
    // Invoking the insertImage command of the Editor.
    this.editor.exec('insertImage',this.imageInfo);

    // Closing the Dialog.
    this.close();
  });
}