angular - Angular 使用 Resolver 为几个字段预填充数据,resolver 将返回一个 Observable 内部订阅者
问题描述
在我的 Angular (8) 应用程序中,想要从服务 (DB) 中预填充几个字段。用例:想要从 DB 中预填充地址、公寓等,针对相应的 pin/zip code.and 从另一个服务获取此邮政编码
我尝试使用解析器
路由器:
const routes: Routes = [
{
path: 'my-form',
component: MyFormComponent,
resolve: { managers: ManagerResolver, locationTrack: LocationTrackResolver,savedAddress: AddressResolver}
},
在我的组件中
this.managers= this.route.snapshot.data.managers;
this.locationTrack = this.route.snapshot.data.locationTrack;
this.savedAddress = this.route.snapshot.data.savedAddress;
以及地址解析器:这里一个订阅者根据位置获取 pin 码,在订阅者内部另一个 Observable获取数据。
@Injectable()
export class AddressResolver implements Resolve<Observable<PatientAddress>> {
savedAddress: Observable<PatientAddress>;
constructor(private addressService: AddressService, private locationMapService: LocationMapService) { }
resolve(route: ActivatedRouteSnapshot): Observable<PatientAddress> {
this.locationMapService.getLocation().subscribe(location => {
this.savedAddress = this.addressService.getLastSavedAddressByPinCode(location.postal);
});
return this.savedAddress;
}
}
解决方案
Observable 是异步的,因此在订阅之外返回 this.savedAddress 将是不可定义的,使用 switchMap 像这样返回内部 observable
试试这个:
@Injectable()
export class AddressResolver implements Resolve<Observable<PatientAddress>> {
savedAddress: Observable<PatientAddress>;
constructor(private addressService: AddressService, private locationMapService: LocationMapService) { }
resolve(route: ActivatedRouteSnapshot): Observable<PatientAddress> {
this.savedAddress = this.locationMapService.getLocation().pipe(switchMap(location =>
this.addressService.getLastSavedAddressByPinCode(location.postal)));
return this.savedAddress;
}
}
推荐阅读
- c# - Systemd 服务在作为服务启动时使用我的 CPU 的 100%,如果我在没有 systemd 的情况下启动它则不会
- python - 为什么在我的猜谜游戏中数字返回高或低不正确
- python - 概括使用 numpy.meshgrid
- python - 所有 v4 请求都给出错误代码 403(禁止)
- javascript - 是否可以使用 HTML、CSS 和 Javascript 来创建可以访问 Iphone 蓝牙配对的 Iphone 应用程序?
- c# - 如何在我的机器人项目中解析包含来自 Microsoft QnA Maker 的转义序列的问题?
- css - 自动反应导入文件并导致构建错误?
- node.js - 无法使用 Node.js、mssql 和 express 连接到 Microsoft SQL Server
- azure - 天蓝色 blob 下载任务问题
- sql - 我可以参考这张表吗?