Angular2:如何处理异步图像 (blob) 请求

Question

我正在尝试通过安全的 API 请求图像。目前，我得到了以下工作(请参阅下面我使用的所有资源。

import { AssetsService } from '../../services/AssetsService';
import { Component } from '@angular/core';
@Component({
    templateUrl: 'home.html',
})
export class HomePage {
    public img;
    constructor(
        public assets_service: AssetsService
    ) { }
    public async ionViewDidEnter() {
        this.img = await this.assets_service.picture_request('test.png');
    }
}

我的观点

<img [src]="img | safe" />

现在我已经看到了看起来很有前途的异步管道。正如您可能已经猜到的那样，我真的不想为我想通过上面使用的 api 请求的每个图像使用 viewmodel 属性。

我想直接从 html 视图中使用异步调用picture_request。这将节省视图模型中的所有管道。从我所读到的内容来看，这样的东西应该可以工作，但只是它没有可悲。

<img [src]="assets_service.picture_request('test.png') | async | safe" />

我

不确定我是否正确使用了async pipe或使用正确的方法。如果我不是，我的方法应该是什么？任何帮助，不胜感激。仅供参考：我正在使用角 2 与离子 2 结合使用。

我使用的其他资源：

我的安全管道

import { Pipe, PipeTransform } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
    constructor(
        private sanitizer: DomSanitizer
    ) { }
    transform(url) {
        return this.sanitizer.bypassSecurityTrustResourceUrl(url);
    }
} 

我的资产服务

import 'rxjs/Rx';
import { Headers, RequestOptions, ResponseContentType } from '@angular/http';
import { Injectable } from '@angular/core';
import { AppConfiguration } from '../app/AppConfiguration';
import { AuthHttp } from 'angular2-jwt';
@Injectable()
export class AssetsService {
    constructor(
        private auth_http: AuthHttp
    ) { }
    /**
     * Fetches a image by filename by filename and converts it to a blob/object url
     */ 
    public picture_request(filename: string) {
        return this.auth_http.post(AppConfiguration.base_url + 'assets/image',
            JSON.stringify({
                filename: filename
            }), 
            new RequestOptions({
                responseType: ResponseContentType.Blob,
                headers: new Headers({
                    'Content-Type': 'application/x-www-form-urlencoded'
                })
            })
            .map(res => res.blob())
            .map(blob => URL.createObjectURL(blob))
            .toPromise();
    }
}

Answer 1

我找到了一个对我有用的解决方案。我创建了一个自定义组件。

import { Component, Input } from '@angular/core';
import { AssetsService } from '../../services/AssetsService';
@Component({
    selector: 'async-image',
    template: `<img [src]="img | safe" />`
})
export class AsyncImageComponent {
    @Input() filename: string;
    public img: any;
    constructor(
        public assets_service: AssetsService
    ) { }
    public async ngOnInit(): Promise<void> {
       this.img = await this.assets_service.picture_request(this.filename);
    }
}

我可以这样使用。

<async-image filename="{{image.filename}}"></async-image>