角度项目中的 Observables (rxjs) 嵌套订阅

Question

有什么更好的替代方法来简化下面的嵌套代码？该代码确实有效，但我确实知道嵌套订阅并不是我所读到的。我也不确定在这个特定示例中是否应该使用 mergeMap() 或 switchMap()。

private subscriptions: Subscription = new Subscription();

ngOnInit() {
        this.subscriptions.add(this._route.paramMap.subscribe((paramMap: ParamMap) => {
          if (this.docType === 'invoice' && paramMap.has('invoiceId')) {
            this.mode = 'edit';
            this.subscriptions.add(this._invoiceService.getInvoice(this.invoiceId).subscribe(invoiceData => {
            //something here}));
          }
          else if (this.docType === 'quote' && paramMap.has('quoteId')) {
            this.mode = 'edit';
            this.subscriptions.add(this._quoteService.getQuote(this.quoteId).subscribe((invoiceData) => {//do something
            }));
          }
          else {
            //do something
            this.subscriptions.add(this._route.params.subscribe(params => {
              this.relatedProjectId = params['projectId']
            }));
           this.subscriptions.add(this._companyService.getCompany().subscribe(
              res => {
                this.showOwnCompany(res);
              }
            ))
          }
        }
        ));
        this.isOpen = true;
      }

Answer 1

您可以删除路由 paramMap 订阅者，而是使用解析器来替换整个初始化过程。

// someWork.resolver.ts

export class SomeWorkResolver implements Resolve<any> {

    constructor(
      private router: Router
      private invoiceService: InvoiceService,
      private quoteService: QuoteService
    ) {}

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
      if(route.param.has('invoiceId') {
          return this.invoiceService.getInvoice();
      } 
      if(route.param.has('quoteId') {
          return this.quoteService.getQuote();
      } 
      // implement the remainder
      return EMPTY;
    }

}

在您的路由器中添加：

{
    path: 'somePath',
    component: SomeComponent,
    runGuardsAndResolvers: 'paramsOrQueryParamsChange',
    resolve: {
        information: SomeWorkResolver
    }
}

现在在您的实际 ngOnInit 中：

ngOnInit() {
  // this has the information returned from the service call. 
  // can you use this information to determine what call was made?
  // IE Quote / Invoice / etc
  this.router.snapshot.data.information;
}

这样做，在解析器...解析之前也不会加载组件。所以也可以避免那行“this.isOpen = true”，我猜这是等待进程完成的黑客。