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属性.

我想picture_request直接从html视图使用异步调用.这将节省我在viewmodel中的所有管道.从我所读到的东西,像这样的东西应该工作,但只有它不可悲.

<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>