在PrimeNG中，我如何在模块内等待解析器时显示旋转器?

Question

我使用prineng14。在我的主应用程序路由文件中，我设置了一个路径来加载模块…

const routes: Routes = [
{
path: '',
loadChildren: () => import('./products/products.module').then(m => m.ProductsModule)
}
];

在我的模块中，我为路由设置了这个解析器…

const routes: Routes = [
...
{
path: 'products',
component: MyHomeComponent,
resolve:{
proudcts:ProductsResolve
}
} 
]

我想有一个旋转器显示，而组件正在加载(即，而解析器仍在获取数据)

<p-progressSpinner></p-progressSpinner>

但是，我不确定把旋转器放在哪里。

Answer 1

解析器阻止组件加载。所以你不能把旋转器放在你解析的组件中。但你可以把它放在父组件上。解析器将向进程启动的共享服务发送一个标志，并添加一个finalize RXJS管道将标志更改为false。在父组件中，你可以监听这个标志。

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
this.sharedService.componentIsLoad$.next(true);
return this.appSrvice.checkSomething().pipe(
finalize(() =>  this.sharedService.componentIsLoad$.next(false))
)
}

在父组件中监听这个标志:

<p-progressSpinner *ngIf="componentIsLoad$ | async"></p-progressSpinner>