Angular管道中处理异步数据

需求

将图片的相对路径作为参数请求接口返回一个图片URL，这样直接放到img标签上面渲染图片，由此想到使用自定义管道的功能；

实现

// minio.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { _HttpClient } from '@delon/theme';
import { lastValueFrom } from 'rxjs';
import { NzMessageService } from 'ng-zorro-antd/message';

@Pipe({ name: 'minioFormat' })
export class MinioPipe implements PipeTransform {
  constructor(private http: _HttpClient, private msg: NzMessageService) {}
  async transform(value: string): Promise<string> {
    const res = await this.getMinioUrlPromise(value);
    if (res.ret === '-1') {
      this.msg.error(res.desc);
      return;
    }
    return res.data;
  }
  getMinioUrlPromise(fileUrl: string) {
    return lastValueFrom(
      this.http.post('/pc/sysservice/queryShareUrl', {
        obj: {
          fileUrl,
        },
      }),