如何在通过 Angular 14 中的解析器获取数据时显示进度微调器？

Question

我正在使用 Angular 14 和 PrimeNG 14。在我的模块中，我创建了默认路由，这取决于从解析器获取数据。我希望用户看到一个微调器，直到来自解析器的数据返回。我的路线是这样设置的......

const routes: Routes = [
  {
    path: '',
    component: MyComponent,
    resolve:{
      myData:MyResolver
    }
  } 
]

在 my-component.ts 文件中，我尝试像这样设置加载状态

  loading = true;

  constructor(private router: Router) {
    console.log("subscribing ...");
    this.router.events.subscribe(routerEvent => {
      this.checkRouterEvent((routerEvent as RouterEvent));
    });
  }

  checkRouterEvent(routerEvent: RouterEvent): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
      console.log("starting.");
    }

    if (routerEvent instanceof NavigationEnd ||
      routerEvent instanceof NavigationCancel ||
      routerEvent instanceof NavigationError) {
      this.loading = false;
      console.log("done.");
    }
  }

在 my-component.html 文件中，我有

<ng-template [ngIf]="loading">
  <p-progressSpinner></p-progressSpinner>
</ng-template>
<ng-template [ngIf]="!loading">
...
</ng-template>

但是，我从来没有看到进度微调器。即使我关闭端点或断开与 Internet 的连接（我希望这会导致无限旋转），我的页面上也没有微调器。我该如何解决？

编辑：正在发生的事情的演示——https://stackblitz.com/edit/primeng-progressspinner-demo-t2taze?file=src/app/app.module.ts。

Answer 1

通过解析器获取数据时显示进度微调器

根据你的 stackblitz-example，我修改了我的Stackblitz Demo以及我的回答。关键事实：

• 的孩子-组件在路由完全完成之前不会加载 已解决，因此它无法触发加载微调器。
• 因此父母-组件（而不是子组件）必须跟踪解析器的开始和完成。
• 进度微调器的 HTML 代码也必须是 放置在父母-成分

---

应用模块:

我建议在应用程序模块中定义整个路由，只要我们没有延迟加载的功能模块（在 stackblitz 示例中，路由分布在两个模块中，因为我不想与 Dave 的解决方案偏离太多）。

const routes: Routes = [
  {
    path: '',
    component: ChildComponent,
    resolve: {
      myData: MyResolver,
    },
  },
];

父组件 TS：

export class AppComponent implements OnDestroy {
  unsubscribe = new Subject<void>();

  loading = true;

  constructor(private router: Router) {
    console.log('subscribing ...');
    this.router.events.pipe(takeUntil(this.unsubscribe))
      .subscribe((routerEvent) => {
        this.checkRouterEvent(routerEvent as RouterEvent);
      });
  }

  checkRouterEvent(routerEvent: RouterEvent): void {
    if (routerEvent instanceof NavigationStart) {
      this.loading = true;
      console.log('starting.');
    }

    if (routerEvent instanceof NavigationEnd ||
        routerEvent instanceof NavigationCancel ||
        routerEvent instanceof NavigationError) {
        this.loading = false;
        console.log('done.');
    }
  }

  ngOnDestroy(): void {
    this.unsubscribe.next();
  }
}

父组件 HTML:

router-outlet在解析完数据后才会加载。

<ng-template [ngIf]="loading">
  <p-progressSpinner></p-progressSpinner>
</ng-template>

<router-outlet></router-outlet>

子组件 TS：

这里可以同步访问来自解析器的数据，即数据必须在子组件加载时已经解析：

resolvedData: any;

constructor(private route: ActivatedRoute) {

  // Access the resolved data:
  this.resolvedData = this.route.snapshot.data.myData;

  // Subscribing to the Router would be worthless at this point,
  // since the data is already resolved.
}