Угловой 6 показывает счетчик между изменениями маршрута

Question

В настоящее время я создал компонент счетчика

import { Router, NavigationStart, NavigationEnd, NavigationCancel, NavigationError } from '@angular/router';
import { Component, OnInit, OnDestroy, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'app-spinner',
    templateUrl: './spinner.component.html',
    styleUrls: ['./spinner.component.scss'],
    encapsulation: ViewEncapsulation.None
})
export class SpinnerComponent implements OnDestroy {

    public isSpinnerVisible = true;
    constructor(private router: Router) {

        this.router.events.subscribe(event => {
            if (event instanceof NavigationStart) {
                this.isSpinnerVisible = true;

            } else if ( event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
                this.isSpinnerVisible = false;
            }
        }, () => {
            this.isSpinnerVisible = false;
        });
    }

    ngOnDestroy(): void {
        this.isSpinnerVisible = false;
    }

}

внутри app.component.html

<router-outlet>
    <app-spinner></app-spinner>
</router-outlet>

spinner.component.html

<div class="preloader" *ngIf="isSpinnerVisible">
    <div class="spinner">
    <div class="double-bounce1"></div>
    <div class="double-bounce2"></div>
    </div>
</div>

однако, он не отображается, и NavigationEnd быстро срабатывает, даже если какой-то фоновый ajax еще не завершен

Answer 1

public isSpinnerVisible = true;
constructor(private router: Router) {

    this.router.events.subscribe(event => {
        if (event instanceof NavigationStart) {
            this.isSpinnerVisible = true;

        } else if ( event instanceof NavigationEnd || event instanceof NavigationCancel || event instanceof NavigationError) {
            this.isSpinnerVisible = false;
        }
    }, () => {
        this.isSpinnerVisible = false;
    });
}


<router-outlet>
    <app-spinner *ngIf="isSpinnerVisible=='ture'"></app-spinner>
</router-outlet>