强制 Angular 等待我的函数的响应

Question

我正在创建一个自定义管道并在其中调用谷歌翻译服务 API。 返回值是转换前的值，因为函数在返回值后执行完毕。我尝试了 async/await/Promise 但没有成功。

import { Pipe, PipeTransform } from '@angular/core';
import { GoogleTranslationService } from 'src/app/google.translation.service';
@Pipe({
  name: 'usdInr'
})
export class UsdInrPipe implements PipeTransform {
  constructor(private googleTranslationService: GoogleTranslationService){
  }
   transform(value: String, ...args: unknown[]): unknown {
    translatedValue:String;
    let model={
      "q": [value],
      "target": "ar"
    };
    console.log("// BEFORE TRANSLATION //"+ value);  //printed first
     this.googleTranslationService.translate(model).subscribe((response:any)=>{
      value=response.data.translations[0].translatedText
      console.log("// AFTER TRANSLATION //"+ value); //printed third
    })
    console.log("// AFTER FUNCTION //"+ value); //printed second
    return value;
  }
}

Answer 1

在您的自定义管道中，您应该返回一个可观察值。

import { map } from 'rxjs';

export class UsdInrPipe implements PipeTransform {
  constructor(private googleTranslationService: GoogleTranslationService) {}

transform(value: String, ...args: unknown[]): Observable<String> {
    let translatedValue: String;
    let model = {
      q: [value],
      target: 'ar',
    };

    return this.googleTranslationService
      .translate(model)
      .pipe(
        map((response: any) => response.data.translations[0].translatedText)
      );
  }
}

在您看来，您应该在自定义管道之后应用

AsyncPipe

。

{{ input | usdInr | async }}

演示@StackBlitz