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

Question

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

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

您需要从服务中返回 observable 并在组件中订阅它。这样一来，observable 的异步特性将被保留，如果需要，您可以使用不同的参数调用假定的 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>