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视图中使用异步调用picture_request。这将节省我在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>

Angular2：如何处理异步图像（blob）请求？

1 个答案: