Angular 7-設置路線導航之間的時間間隔

Question

我想在從一頁導航到另一頁時看到一個加載器。 為此，我故意要設置兩條路線導航之間的超時或時間間隔。 路由的名稱為“列表”和“注冊”。 如何在兩條路線的導航之間添加時間間隔？

儀表板組件 ：

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

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {
  showloader = true;

  constructor(private route: Router) {
    this.route.events.subscribe((routerEvent: Event) => {

      if(routerEvent instanceof NavigationStart){  
        this.showloader = true;
      }

      if(routerEvent instanceof NavigationEnd){
        this.showloader = false;
      }
    });
  }

  ngOnInit() {
  }
}

DashBoard.html：

<div>
    <nav class="navbar navbar-expand-sm bg-light">
        <ul class="nav navbar-nav">
            <li class="nav-item">
                <a class="nav-link" routerLink="list">List of Animes</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" routerLink="register">Register</a>
            </li>
            <li class="nav-item">
                <a class="nav-link">Description</a>
            </li>
        </ul>
    </nav>
</div>

Answer 1

routerOnActivate() { //or ngOnInit()
  this.timer = setInterval(()=>{
                ...
            }, 100);
}

routerOnDeactivate() {
  clearInterval(this.timer);
}