Angular 8: Как отображать загрузчик / спиннер только на определенных компонентах на разных выходах маршрутизатора на основе ответа HTTP?

Question

Как я могу показать Loader / Spinner только на определенных компонентах на разных выходах маршрутизатора на основе ответа HTTP. Например, у меня есть разные модули, и я хочу, чтобы spinner отображался на этой розетке маршрутизатора только тогда, когда выполняется какой-либо запрос HTTP на только компоненты этого модуля.

Answer 1

Используйте библиотеку ng-block-ui, которая популярна для show loader для специфики c div, специфицированного c модуля маршрутизатора и проста в настройке.

npm install ng-block-ui --save

Включите BlockUIModule в модуль основного приложения.

import { BlockUIModule } from 'ng-block-ui';

@NgModule({
  imports: [
    BlockUIModule.forRoot()
  ]
})
export class AppModule { }

Ниже приведен пример для указания c, показывающего загрузку в указанном c div или контейнере.

@Component({
  selector: 'cmp',
  template: `
    <ng-template #blockTemplate>
      <div class="block-ui-template">
        <img src="logo.png" />
      </div>
    </ng-template>

    <block-ui [template]="blockTemplate">
      <!-- Your app markup here -->
    </block-ui>
  `
})
export class Cmp {}

Даже вам следует настроить задержку загрузки, размер загрузки в соответствии с URL вашего маршрутизатора или событиями загрузки данных.