Angular 使用解析器为几个字段预填充数据，解析器将 return 订阅者内部的 Observable

Question

在我的 Angular (8) 应用程序中，想要预填充来自服务 (DB) 的几个字段。用例：想要从 DB 预填充地址、公寓等，反对相应的 pin/zip code.and 从另一个服务

获取此邮政编码

我尝试使用 Resolver

路由器：

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;
  }
}

Answer 1

Observable 是异步的，所以 returning this.savedAddress 外部 subscribe 将是不可抗拒的，像这样使用 switchMap 到 return 内部 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;
   }
 }

Angular 使用解析器为几个字段预填充数据，解析器将 return 订阅者内部的 Observable

Angular prepopulate data for couple of fields using Resolver, resolver will return an Observable inside subscriber

resolver

subscribe

observable

rxjs

angular