javascript - Angular 2 : How to handle a async image (blob) request?

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

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

我想直接从 html View 使用异步调用 picture_request。这将为我节省 View 模型中的所有管道。从我读过的内容来看，像这样的东西应该有用，但遗憾的是它并没有。

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

我不确定我是否正确地使用了 async pipe 或使用了正确的方法。如果我不是，我的方法应该是什么？任何帮助表示赞赏。仅供引用:我将 angular 2 与 ionic 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);
    }
} 

我的 Assets 服务

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>