Почему не отображается спиннер? - PullRequest
Новая
       28

Почему не отображается спиннер?

0 голосов
/ 03 августа 2020

Индекс. html файл: 

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

Файл App.module: 

@NgModule({

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

Я вижу на странице тег <mat-spinner></mat-spinner>, но он не работает, в консоли ошибок нет

1 Ответ

3 голосов
/ 03 августа 2020
Компоненты

Angular не могут быть обработаны отдельно внутри файла index. html. Вот почему по умолчанию AppComponent загружается через файл main.ts.

Вы должны включить mat-spinner внутри Angular Component. Если счетчик предназначен для отображения при ускорении приложения, вы должны использовать настраиваемый счетчик, который затем можно включить в индекс. html: 

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

Для отображения счетчика при ленивой загрузке модуля на маршрутизации, вы можете прослушивать router.events в компоненте, содержащем <router-outlet>: 

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

...