在服务中使用异步方法的结果分配组件变量

Question

我正在尝试构建一个应用程序，但我不希望我的组件包含不必要的代码。我想将很多逻辑放入服务中，然后将服务注入到我的组件中。假设我的组件有一个名为 'result':

的变量

my.component.ts

    .....

    private result:number;

我的服务有一个异步方法：

my.services.ts

    ......
    ......

    getNumberFromApi(){
    callAsync().subscribe( data => {
        console.log('This is the data obtained..'+data);
    })

我希望有机会向方法 getNumberFromApi() 传递参数:

    getNumberFromAPI(destinationVar:number){
    callAsync().subscribe( data => {
        console.log('This is the data obtained..'+data);
        destinationVar=data;
    })

这样在我的组件中我就可以这样调用这个服务的方法:

my.component.ts

    .....

    private result:number;
    myServiceInstance.getNumberFromApi(result);

我知道这是不可能的（可能是因为方法的堆栈在响应到达时已经消失）但我找不到执行此操作或类似操作的方法。有人可以推荐我一个替代品吗？我想从组件的服务变量修改，即使使用异步方法，没有除了组件中的方法调用行之外的任何东西。这可能吗？我是否遗漏了 Typescript/Angular 如何在这里工作的关键概念？谢谢

Answer 1

您需要 return 来自服务的可观察对象并在组件中订阅它。这样，可观察对象的异步性质将得到保留，如果需要，您可以使用不同的参数调用假定的 API 调用。

服务

import { Observable } from 'rxjs';

getNumberFromApi(): Observable<any> {
  return callAsync();
}

组件

export class SomeComponent implements OnInit {
  someVar: any;

  constructor(private someService: SomeService) { }
  
  ngOnInit() {
    this.someService.getNumberFromApi().subscribe({
      next: (value: any) => this.someVar = value,
      error: (error: any) => { }
    });
  }
}

另一方面，如果组件中的变量 someVar 仅在模板中用于渲染一些数据，则可以跳过组件控制器中的订阅并使用 async 管道在模板中。

控制器 (*.ts)

import { Observable } from 'rxjs';

export class SomeComponent implements OnInit {
  someVar$: Observable<any>;   // <-- dollar sign is only a convention

  constructor(private someService: SomeService) { }
  
  ngOnInit() {
    this.someVar$ = this.someService.getNumberFromApi();
  }
}

模板(*.html)

<ng-container *ngIf="(someVar$ | async) as someVar">
  <!-- use `someVar` -->
  {{ someVar }}
</ng-container>

在服务中使用异步方法的结果分配组件变量

Asign component variable with result of async method in a service

parameters

methods

asynchronous

typescript

angular