angular 项目中的 Observables (rxjs) 嵌套订阅
Observables (rxjs) nested subscriptions in angular project
有什么更好的方法可以简化我下面的嵌套代码?代码确实有效,但我确实知道嵌套订阅并不像我读过的那样好。我也不确定在这个特定示例中是否应该使用 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;
}
您可以删除路由 paramMap 订阅者,而是使用解析器来替换整个 init 进程。
// 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”,我猜这是等待进程完成的黑客行为。
有什么更好的方法可以简化我下面的嵌套代码?代码确实有效,但我确实知道嵌套订阅并不像我读过的那样好。我也不确定在这个特定示例中是否应该使用 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;
}
您可以删除路由 paramMap 订阅者,而是使用解析器来替换整个 init 进程。
// 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”,我猜这是等待进程完成的黑客行为。