我在应用程序中为图像src制作了一个自定义管道:
它正像这样在选择器上使用:
<img [src]="myobject?.URL | secure" />
管道的代码是:
import { Pipe, PipeTransform } from '@angular/core';
import { Http, ResponseContentType } from '@angular/http';
import { DomSanitizer, SafeUrl } from '@angular/platform-browser';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
@Pipe({
name: 'secure'
})
export class SecurePipe implements PipeTransform {
constructor(private http: Http, private sanitizer: DomSanitizer) { }
transform(url): Observable<SafeUrl> {
if (//myboolcondition) {
return this.http
.get(url, { responseType: ResponseContentType.Blob })
.catch(err => Observable.throw(err))
.map(val => this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(val)));
}
else {
// This is not working and the image src are blank
// My goal in this else loop is just to return what was there originally // in [src]="myobject?.URL in selector
return Observable.of(url);
}
}
}
我面临的问题是管道代码中if循环的else部分无法正常工作,并且返回空响应,而else部分则无法呈现图像。
当我的代码中满足条件的else循环时,您能否让我知道如何返回相同的url,即“ [src] =“ myobject?.URL”一样。
您将返回,Observable
而Observable
实例只有在您subscribe
访问实例时才开始发布值。如果您想observables
直接在模板中使用,则需要AsyncPipe
AsyncPipe
接受一个可观察的或一个promise作为参数,调用订阅或附加一个then处理程序,然后等待异步结果传递给调用者。
修改后的代码
<img [src]="myobject?.URL | secure | async" />
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句