diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index 5b37ea5..d9f7b2f 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -1,6 +1,6 @@ - + badge EMS @for (route of routes; track route) { diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 3e08782..659cd05 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -1,10 +1,10 @@ -import {AsyncPipe, Location, TitleCasePipe} from '@angular/common'; -import {Component, OnInit} from '@angular/core'; -import {MatAnchor, MatButton, MatIconButton} from '@angular/material/button'; -import {MatIcon} from '@angular/material/icon'; -import {MatToolbar} from '@angular/material/toolbar'; -import {Router, RouterLink} from '@angular/router'; -import {AuthService} from '@core/auth/auth.service'; +import { AsyncPipe, TitleCasePipe } from '@angular/common'; +import { Component, OnInit } from '@angular/core'; +import { MatAnchor, MatButton, MatIconButton } from '@angular/material/button'; +import { MatIcon } from '@angular/material/icon'; +import { MatToolbar } from '@angular/material/toolbar'; +import { EventType, Router, RouterLink } from '@angular/router'; +import { AuthService } from '@core/auth/auth.service'; @Component({ selector: 'app-header', @@ -26,22 +26,24 @@ export class HeaderComponent implements OnInit { constructor( private router: Router, - private location: Location, protected auth: AuthService ) { } ngOnInit(): void { - this.routes = this.router.config + const routes = this.router.config .filter(route => !route.path?.includes(':')) - .filter(route => !route.path?.includes('/')) - .map(route => ({ + .filter(route => !route.path?.includes('/')); + + this.router.events.subscribe((event) => { + if (event.type != EventType.NavigationEnd) { + return; + } + this.routes = routes.map(route => ({ path: `/${route.path}`, title: route.title as string, - class: `/${route.path}` == (this.location.path() || '/') ? 'active' : '' + class: `/${route.path}` == event.url ? 'active' : '' })); + }); } } - - -