I have a timer(counter) component and use it in my dashboard.html. The program is about to see how much time left until the client arrives. How can I make my timer keep running when I am switching routes instead of resetting it to defautlt?
dashboard.html
<div class="text-center">
<h1 class="bc">Welcome !</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;
}
}
My routes in 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]}
])
It should be ticking also when I am not in my dashboard.html
Aucun commentaire:
Enregistrer un commentaire