Question

我正在尝试在项目中使用 mat-spinner。令人惊讶的是，虽然垫子旋转器适用于某些组件，但它不适用于其他一些组件。可能是什么问题呢？我在 component.ts 文件中使用了以下代码，用于 mat-spinner 不工作的组件-

        loading: boolean
        constructor( private router: Router){
        router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                 this.loading = true;
            }
            if (event instanceof NavigationEnd || event instanceof NavigationError || event instanceof NavigationCancel) {
                 this.loading = false;
            }
        });
     }

以及 component.html 文件中的以下代码段

 <mat-spinner *ngIf="loading"></mat-spinner>

即使 loading 变量返回 true ，微调器也不会显示。我的 app.module.ts 文件如下

 import { NgModule } from '@angular/core';
import { MatButtonModule, MatCardModule, MatCheckboxModule, MatDatepickerModule, 
MatFormFieldModule, MatInputModule, MatPaginatorModule, 
MatProgressSpinnerModule, MatSelectModule, MatSortModule,
 MatStepperModule, MatTableModule, } from '@angular/material';

import { MatMomentDateModule, MomentDateAdapter } from '@angular/material-moment-adapter';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterModule } from '@angular/router';

@NgModule({
    declarations: [AppComponent],
    imports: [
        DataTablesModule,
        BrowserModule,
        MatNativeDateModule,
        BrowserModule,
        HttpClientModule,
        BrowserAnimationsModule,
        NgxMatDatetimePickerModule,
        NgxMatTimepickerModule,
        NgxMatMomentModule,
        NgxMatNativeDateModule,
        MatDatepickerModule,
        MatInputModule,
        MatNativeDatetimeModule,
        FormsModule,
        ReactiveFormsModule,
        MatButtonModule,
        BrowserAnimationsModule,
        MatListModule
})

我现在能做什么？

Answer 1

我认为在某些情况下，更改检测没有时间检测 loading 的更改。

我会将 loading 切换到 Observable 并手动处理它的显示方式。

loading$: Observable<boolean> = this.router.events.pipe(
    map(event => {
      if (event instanceof NavigationStart) {
        return true;
      }
      if (
        event instanceof NavigationEnd ||
        event instanceof NavigationError ||
        event instanceof NavigationCancel
      ) {
        return false;
      }
      return undefined;
    }),
    filter(ev => ev !== undefined),
    switchMap(loading => {
      if (!loading) {
        return of(loading).pipe(delay(1000));
      } else {
        return of(loading);
      }
    })
  );

见this reproduction on StackBlitz。

然后使用异步管道将其解包到您的模板中。

为了更高级的加载器状态管理，我推荐这篇来自 Angular GDE Alexander Inkin 的文章：RxJS Challenge #17: Non-flicker loader

Answer 2

如果您在控制台中没有收到任何错误，那么可能 mat-spinner 可用。它没有出现的原因可能是处理加载的方式。我建议将其移至中央服务，以便它为每个组件运行。

一个额外的指针：由于你的组件（可能在同一个模块中），路由导航之间没有实际的等待时间。您还应该查看应用程序业务需求以显示加载程序。

Mat-spinner 适用于某些组件，但不适用于 Angular 中的某些其他组件

2 个答案: