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);
}