如何将订阅从组件移动到解析

Question

在我的组件中的Angular应用程序中，我使用switchMap订阅了两个Observable，该Observable从两个API获取数据，当组件打开时，我必须显示一个骨架或加载器，我会阻止它，所以我刚刚阅读了Resolve的相关内容，据我所知，它预加载数据，然后激活路由。

所以我想知道如何将以下订阅从ngOnInit转移到Resolver

以下是我的ngOnInit现在的样子

ngOnInit(): void {
this.menuService
.menu(this.idNegozio, this.piva, 'IT')
.pipe(
switchMap((menu) =>
forkJoin([
of(menu),
this.pluService.plu(this.idNegozio, this.piva, 'IT'),
])
)
)
.subscribe(([menu, plus]) => {
this.menu = menu;
this.plus = plus;
this.filterPlu(menu[0].id);
if (this.filteredPlu.length) {
this.ready = true;
}
});
}

同一组件用于三条路线：

{
path: 'asporto',
component: ProductsComponent,
canActivate: [ItemsGuardService]
},
{
path: 'takeaway',
component: ProductsComponent,
},
{
path: 'ecom',
component: ProductsComponent,
},

Answer 1

创建一个解析程序

@Injectable()
export class MenuResolver implements Resolve<Menu>{
constructor(private menuService: MenuService, private pluService: PluService) {}
resolve(route: ActivatedRouteSnapshot): Observable<Menu> {
const piva = route.parent.params.piva;
const negozio = route.parent.params.negozio;
return  this.menuService
.menu(negozio, piva, 'IT')
.pipe(
switchMap((menu) =>
forkJoin([
of(menu),
this.pluService.plu(negozio, piva, 'IT'),
])
),
map(([menu, plus]) => ({ menu, plus }))
);
}
}

在您的路线定义中使用它，并在您的父模块中提供它

const routes: Routes = [
{
path: '',
resolve: { menu: MenuResolver },
component: Component,
}
];
@NgModule({
imports: [
RouterModule.forChild(routes),
],
providers: [
MenuResolver,
]
})
export class MyModule { }

然后通过ActivatedRoute 将其放入您的组件中

export class MyComponent {
menu: Menu;
plus: MenuDetails;

constructor(private route: ActivatedRoute){}

ngOnInit() {
const menuData = this.route.snapshot.data.menu;
this.menu = menuData.menu;
this.plus = menuData.plus;
}
}

您必须将解析器添加到所有相关的路由中，并在组件中以相同的方式使用它