在Angular2路径导航上显示加载微调器

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

@Component({
  selector: 'app-navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.css']
})
export class NavigationComponent implements OnInit {
  showLoader: boolean = false;

  constructor(private router: Router) { }

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

    setTimeout(() => {
      this.showLoader = false;
    }, 2000);
  }
}

<!-- navigation.component.html -->
<div *ngIf="showLoader" class="loader">
  <!-- Display loading spinner or progress bar here -->
</div>

<ul>
  <li><a [routerLink]="['/home']">Home</a></li>
  <li><a [routerLink]="['/about']">About</a></li>
  <li><a [routerLink]="['/contact']">Contact</a></li>
</ul>