为什么 mat-spinner 不显示？

Question

Index.html 文件是：

<body>
    <mat-spinner></mat-spinner>
</body>

App.module 文件是：

@NgModule({

 imports: [
        BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        MatProgressSpinnerModule,
        BrowserAnimationsModule
]
})

我在页面标签上看到 <mat-spinner></mat-spinner> 但它不起作用，控制台中没有任何错误

Answer 1

Angular 组件无法在 index.html 文件中自行呈现。这就是为什么默认的 AppComponent 是通过 main.ts 文件引导的。

您应该在 Angular 组件中包含 mat-spinner。如果微调器要显示在应用程序 boostraping 上，则必须使用自定义微调器，然后可以将其包含在 index.html :

<app-root><div id="spinner"></div></app-root>

要在路由上延迟加载模块时显示微调框，您可以在包含 <router-outlet>:

的组件中监听 router.events

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;
      }
    });
  }

并有条件地显示您的微调器：

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

这是一个 stackblitz 示例（但由于模块加载速度过快，因此未显示微调器）：https://stackblitz.com/edit/angular-ivy-xwd2ta?file=src%2Fapp%2Fapp.component.ts

为什么 mat-spinner 不显示？

Why mat-spinner not showing?

angular-material

angular

angular-material-7