来自模板的角度异步函数调用

Question

我尝试为我的 Ionic 应用程序构建图像缓存服务。

<ion-col [routerLink]="['/category-detail',cat.objectId,i]" class="category-item"
      *ngFor="let cat of categories;index as i" size="3">
      <ion-img class="cat-image" [src]="getImage(cat.image.url) | async">
      </ion-img>
      <p class="cat-name">
        {{cat.name}}
      </p>
    </ion-col>

我从 ion-image 中的 src 标签调用函数

async getImage(fileUrl: any) {
    return await this.cacheService.checkFile(fileUrl);
  }

这个函数检查一个文件，如果它在那里它返回文件的 URL，否则它在参数中返回 URL

public async checkFile(fileUrl) {
    let stringURL = String(fileUrl);
    let fileName = stringURL.split('//')[1].replace(/\//g, '-');
    return this.file.checkFile(this.file.tempDirectory, fileName)
      .then(
        async result => {
          if (result) {
            return this.file.tempDirectory + fileName;
          } else {
            return fileUrl;
          }
        }
      )
      .catch(
        async err => {
          //FileError.NOT_FOUND_ERR
          if (err.code == 1) {
            let fileTransfer: FileTransferObject = this.transfer.create();
            return fileTransfer.download(fileUrl, this.file.tempDirectory + fileName, true)
              .then(
                result => {
                  console.log(result);
                  return result;
                }
              )
              .catch(
                error => {
                  throw error;
                }
              )

          } else {
            throw err;
          }

        }
      )
  }

我搜索了各种问题和示例，但没有一个对我有用。

我的目标是尝试返回带有承诺链的动态 URL。

我对 Angular 中的 async、promise 和 observable 关键字感到很困惑。

我的项目配置：

Ionic:

   Ionic CLI                     : 6.9.1 (/Users/suatkarabacak/npm/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.1.1
   @angular-devkit/build-angular : 0.803.26
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Cordova:

   Cordova CLI       : 9.0.0 (cordova-lib@9.0.1)
   Cordova Platforms : android 8.1.0, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.2.1, (and 7 other plugins)

Utility:

   cordova-res : 0.14.0
   native-run  : 1.0.0

System:

   ios-deploy : 1.9.4
   ios-sim    : 8.0.2
   NodeJS     : v10.16.3 (/usr/local/bin/node)
   npm        : 6.9.0
   OS         : macOS Catalina
   Xcode      : Xcode 11.3 Build version 11C29

Answer 1

在这种情况下，我会使用自定义管道来实现您的要求。

所以基本上你的模板中有如下内容：

<ion-col ... *ngFor="let cat of categories ..." ...>
   <ion-img ... [src]="cat | catImageUrl | async"></ion-img>
</ion-col>

然后你将实现一个自定义的Angular pipe 从一个猫对象异步获取猫图像 URL：

@Pipe({name: 'catImageUrl'})
export class CatImageUrlPipe implements PipeTransform {
  constructor(/* inject your cache service */) {}

  transform(cat: Category): Promise<string> {
    return this.cacheService.checkFile(cat.image.url);
  }
}

这就是你所需要的。基本上，您将 2 个管道组合在一起以进行 Category -> Promise<string> -> string 转换以获取图像 url。

Answer 2

忽略您的checkFile 方法，但您可以使用async 管道：

image : Promise<any>;

ngOnInit(): void {
  if (this.cat) {
    this.image = this.cacheService.checkFile(this.cat.image.url);
  }
}

<ion-img class="cat-image" [src]="image | async"></ion-img>

基本上，如果你真的想等待 Promise，你只需要使用async/await。当您实际返回承诺时，它是没有用的。只是弄乱你的代码