我正在嘗試構建一個應用程式，我不希望我的組件有不必要的代碼。我想將很多邏輯放入服務中，然后將服務注入到我的組件中。假設我的組件有一個名為“結果”的變數：
我的.component.ts
.....
private result:number;
我的服務有一個異步方法：
我的.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;
})
因此，在我的組件中，我將能夠以這種方式呼叫此服務的方法：
我的.component.ts
.....
private result:number;
myServiceInstance.getNumberFromApi(result);
我知道這是不可能的（可能是因為在回應到達時方法的堆疊已經消失了），但我找不到這樣做的方法或類似的方法。有人可以推薦我一個替代品嗎？我想從組件的服務變數中進行修改，即使使用異步方法，除了組件中的方法呼叫行之外什么都沒有。這可能嗎？我是否錯過了關于 Typescript/Angular 如何在這里作業的關鍵概念？謝謝。
uj5u.com熱心網友回復：
您需要從服務中回傳 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/430586.html
上一篇：復雜的串行和并行承諾解決方案
下一篇：任務內的異步任務