Angular2:如何使用Promise显示图像？

Question

以下是我的组件,我想使用Promise显示图像.以下是我的代码,浏览器在运行时没有响应.任何人都可以帮我解决这个问题.

HTML:
<img [src]="getImage()"  />

JS: my.component.ts

// ...

public imageUrl:string;   

constructor() {

   this.imageUrl = "path-to-my-image/image.png";
}

getImage(){
    return new Promise((resolve,reject) =>{
        // this.imageUrl  is not static one, it may fetch from the server
      resolve(this.imageUrl);
    });
}

// ...

Answer 1

当您使用函数调用时src,Angular的更改检测机制将一遍又一遍地调用它.在您的情况下,这将启动服务器调用数百或数千次.

你想要的是:

<img [src]="image | async">

ngOnInit() {    
  this.imageUrl = "path-to-my-image/image.png";
  this.image = this.getImageUrl();
}

getImageUrl() {
  return new Promise((resolve,reject) =>{
    // this.imageUrl  is not static one, it may fetch from the server
    resolve(this.imageUrl);
  });
}

但是,这只会工作一次.换句话说,如果你getImageUrl再次打电话,什么都不会发生.你可能想要的是将URL变成流(可观察):

<img [src]="image$ | async">

ngOnInit() {    
  this.imageUrl = "path-to-my-image/image.png";
  this.image$ = this.getImageUrl();
}

getImageUrl() {
  return Observable.of(this.imageUrl);
}