Angular 在“新建”选项卡中使用解析器获取数据时添加进度条

在我们的应用程序中，有一个表，单击表行中的details按钮，将打开新的选项卡，我正在使用resolver在加载选项卡之前获取数据。由于获取数据需要时间，我看到的是大约5到10秒的空白屏幕。是否可以在应用程序加载UI之前添加进度条

我已经有了一个进度条，每当发生http截获时就会加载它。由于此场景中未加载UI，因此不会出现加载程序

由于添加了解析器，获取数据需要时间，所以在获取数据之前，我会看到一个空白屏幕。所以，在数据获取期间，我想显示一个进度条。我将如何做到这一点

  {
        path: 'details',
        resolve: {
          details: DeviceResolverService,
        },
        component: DetailsComponent,
      },

此路由将在“新建”选项卡中打开

如果是这样，在提取数据时，如果未加载UI，我将如何显示进度条？

您可以使用以下方法解决问题：

npm输入块ui

在

块UI中包装您的选项卡

<div *blockUI="'fetch-data-block-ui'">
  <ul>
    <li><a routerLink="tab-1">Tab 1</a></li>
    <li><a routerLink="tab-2">Tab 2</a></li>
    <li><a routerLink="tab-3">Tab 3</a></li>
    <li><a routerLink="tab-4">Tab 4</a></li>
  </ul>
</div>

@Injectable()
export class ProductResolverService implements Resolve<any>  {

  constructor(private http: HttpClient) { }

  @BlockUI('fetch-data-block-ui') blockUIList: NgBlockUI;

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // start loading 
    this.blockUIList.start();

    return this.http.get('ULR').pipe(
      map((response) => {
        // after getting the result here, you have to stop the loading 
        this.blockUIList.stop()
        return response;
      }),
      catchError((err, caught) => {
        this.blockUIList.stop()
        return of(null)
      })
    )


  }
}

  imports: [
   ...
    BlockUIModule.forRoot(),
  ],