использование angular cdk и mat-spinner для всплывающего индикатора загрузки - PullRequest
Новая
       57

использование angular cdk и mat-spinner для всплывающего индикатора загрузки

0 голосов
/ 03 мая 2020

Поэтому я пытаюсь следовать указаниям здесь (вариант 4), чтобы сделать индикатор загрузки, но он не появляется. Кто-нибудь может понять, что я делаю не так? Вот мой код:

spinner-overlay.component. html

<div class="spinner-wrapper">
    <mat-spinner></mat-spinner>    
</div>

spinner-overlay.component.s css 

.spinner-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.5);
    z-index: 998;
    mat-spinner {
        width: 6rem;
        height: 6rem;
    }
}

spinner-overlay.component.ts 

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'jhi-spinner-overlay',
  templateUrl: './spinner-overlay.component.html',
  styleUrls: ['./spinner-overlay.component.scss']
})
export class SpinnerOverlayComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

spinner-overlay.service.ts 

import { Injectable } from '@angular/core';
import { Overlay, OverlayRef } from '@angular/cdk/overlay';
import { ComponentPortal } from '@angular/cdk/portal';
import { SpinnerOverlayComponent } from './spinner-overlay/spinner-overlay.component';

@Injectable({
  providedIn: 'root'
})
export class SpinnerOverlayService {


  private overlayRef: OverlayRef;

  constructor(private overlay: Overlay) { }

  public show(): void {
    if(!this.overlayRef) {
        this.overlayRef = this.overlay.create();
    }
    console.log("show spinner");
    const spinnerOverlayPortal = new ComponentPortal(SpinnerOverlayComponent);
    this.overlayRef.attach(spinnerOverlayPortal);

  }

  public hide(): void {
    console.log("hide spinner");
    if(this.overlayRef){
        this.overlayRef.detach();
    }
  }
}

home.module.ts 

...
import { MatProgressSpinnerModule } from '@angular/material';
...
import { SpinnerOverlayComponent  from './spinner-overlay/spinner-overlay.component';

NgModule({
  imports: [
    ...
    MatProgressSpinnerModule,
    ...
   ],
   entryComponents: [ SpinnerOverlayComponent ]
})

home.component.ts 

import { SpinnerOverlayService } from './spinner-overlay.service';

@Component({
  selector: 'jhi-home',
  templateUrl: './home.component.html',
  styleUrls: ['home.scss']
})
export class HomeComponent implements OnInit, OnDestroy {

  constructor ( private spinnerService: SpinnerOverlayService) {}

  functionThatTakesAwhile(): void {
    this.spinnerService.show();
    ...
    this.spinnerService.hide();
  }
}
...