强制 Angular 等待我的函数的响应-解网

问：

我正在创建一个自定义管道并在其中调用谷歌翻译服务 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;
  }
}

angular 异步 async-await promise

import { map } from 'rxjs';

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)
    );
}

或者您可以返回如下：Promise

import { firstValueFrom, map, Observable, switchMap } from 'rxjs';

async transform(value: String, ...args: unknown[]) {

  let model = {
    q: [value],
    target: 'ar',
  };

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

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

{{ input | usdInr | async }}

演示@ StackBlitz

上一个：在异步函数中链接请求

下一个：同步运行 asnyc 函数

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

Force Angular to wait for my function's response

评论