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

z9smfwbn 于 2023-04-07 发布在 TypeScript

关注(0)|答案(1)|浏览(144)

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

my.component.ts

.....

    private result:number;

我的服务有一个async方法：

我的服务.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);

我明白这是不可能的（可能是因为在响应到达时方法的堆栈已经消失了）但我找不到这样做的方法或类似的方法。有人能推荐我一个替代方案吗？我想修改组件的服务**变量，即使是异步方法，without anything more than a method invocation line in the component.这可能吗？我是不是错过了Typescript/Angular如何工作的关键概念？谢谢。

typescript

来源：https://stackoverflow.com/questions/71128751/asign-component-variable-with-result-of-async-method-in-a-service

1条答案

按热度按时间

rkttyhzu1#

您需要从服务返回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仅在模板中用于呈现某些数据，则可以跳过组件控制器中的订阅，并在模板中使用Angular 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>

赞(0）回复(0）举报 2023-04-07

我来回答

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

1条答案

相关问题

热门标签

最新问答