कोणीय 2: एसिंक छवि (ब्लॉब) अनुरोध को कैसे संभालें?

Question

मैं एक सुरक्षित एपीआई के माध्यम से एक छवि का अनुरोध करने की कोशिश कर रहा हूँ। फिलहाल मैं काम करने के लिए (सभी संसाधनों मैं नीचे का उपयोग निम्न मिला है।

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 कि होनहार लग रहा है देखा है। आप समझ गए होंगे जैसा कि , मैं वास्तव में ऊपर दी गई एपीआई के माध्यम से अनुरोध करने के लिए प्रत्येक छवि के लिए एक व्यूमोडेल प्रॉपर्टी का उपयोग नहीं करना चाहता हूं।

मैं HTML दृश्य से सीधे async कॉल picture_request का उपयोग करना चाहता हूं। मुझे व्यूमोडेल में सभी नलसाजी। एफ रोम जो मैंने कुछ पढ़ा है जैसे कुछ काम करना चाहिए, लेकिन केवल दुख की बात नहीं है।

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

मैं अगर मैं सही ढंग से async pipe उपयोग कर रहा हूँ या सही दृष्टिकोण का उपयोग कर यकीन नहीं है। अगर मैं नहीं हूं कि मेरा दृष्टिकोण क्या होना चाहिए? किसी भी मदद की सराहना की है। FYI करें: मैं आयनिक के साथ संयोजन में कोणीय 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>