Как заставить компонент таймера работать при переключении маршрутов в угловые?

Question

У меня есть компонент таймера (счетчика), и я использую его в моем dashboard.html.Программа собирается увидеть, сколько времени осталось до прибытия клиента.Как я могу заставить свой таймер работать, когда я переключаю маршруты вместо сброса его на defautlt?

dashboard.html

<div class="text-center">
  <h1 class="bc">Welcome {{ appUser.username }}!</h1>
  <div class="row" *ngIf="appUser && appUser?.loggedIn && appUser?.isDoctor">
    <div class="col">
      <counter #counter></counter>
      <div><a class="btn btn-success" routerLink="add-new-client">Add new client</a></div>
      <div><a class="btn btn-primary" routerLink="my-clients" >My Clients</a></div>
      <div><a class="btn btn-info" routerLink="all-clients">All Clients</a></div>
    </div>
  </div>
  <div class="row">
    <div class="col" ><a class="btn btn-warning" (click)="LogOut()">Logout</a></div>
  </div>
</div>

dashboard.ts

export class DashboardComponent implements OnInit, AfterViewInit {
  appUser: User;
  clients: Client[] = [];
  today: Date = new Date(2019, 10, 26, 12, 20);     // Defualt todays time;

  @ViewChild('counter', {read: CounterComponent, static: false})
  private counter: CounterComponent;

  constructor(private userS: UserService,
              private clientService: ClientService,
              private router: Router) {
                setInterval(() => {
                  this.today.getTime(); //= new Date(2019, 10, 26, 12, 20);
                }, 1);
              }

  counterState = 'counter is ticking';
  ngOnInit() {
    this.appUser = this.userS.currentUser;
    this.clients = this.clientService.getUserClients()
    .sort((a, b) => {
      return (new Date(a.registrationDate) as any) - (new Date(b.registrationDate) as any);
    });
  }

  ngAfterViewInit() {
    this.counter.startAt = this.timeRemaining();
    this.counter.counterState.subscribe((msg)=>{
      if(msg === 'COMPLETE') {
        this.counterState = 'counter has stopped';
        alert('You need to serve a client!');
      }
    });
    this.counter.start();

  }

  private timeRemaining() {
    let t1 = this.clientService.getFirstInRowClient().registrationDate;
    let dif =  (t1.getTime() - this.today.getTime()) / 1000;
    if (dif < 0) {
      return 0;
    }
    return dif;
  }
}

Мои маршруты в app.module.ts

RouterModule.forRoot(
      [ { path: '', component: LoginComponent},
        { path: 'dashboard', canActivate: [AuthguardGuard], component: DashboardComponent},
        { path: 'dashboard/add-new-client', component: ClientFormComponent, canActivate: [AuthguardGuard]},
        { path: 'dashboard/all-clients', component: AllClientsComponent, canActivate: [AuthguardGuard]},
        { path: 'dashboard/my-clients', component: MyClientsComponent, canActivate: [AuthguardGuard]}
      ])

Должно быть помечено также, когда я не в моем dashboard.html

Редактировать: я создал timer.service.ts, но когда я звонюtimeRemaining() в инструментальной панели он по-прежнему сбрасывается каждый раз для сброса.

import { ClientService } from './client.service';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class TimerService {
  today: Date = new Date(2019, 10, 26, 12, 20);     // Defualt todays time;

  constructor(private clientService: ClientService) { }


  timeRemaining() {
    let t1 = this.clientService.getFirstInRowClient().registrationDate;
    let dif =  (t1.getTime() - this.today.getTime()) / 1000;
    if (dif < 0) {
      return 0;
    }
    return dif;
  }

}