SZUT/EMS
10
0
Fork 0
Code Issues Pull requests Projects Activity Actions

Fix: Header not working with router links
All checks were successful
Quality Check / Linting (push) Successful in 25s
Details

Browse source
This commit is contained in:
Dominik Säume 2025-01-21 10:13:24 +01:00
parent 2fe272c1e4
commit 488990f634
2 changed files with 18 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/header/header.component.html
View file

@ -1,6 +1,6 @@
<mat-toolbar class="header"> <mat-toolbar class="header">
<nav> <nav>
<a routerLink="'/'" mat-button> <a routerLink="" mat-button>
<mat-icon>badge</mat-icon> <mat-icon>badge</mat-icon>
EMS</a> EMS</a>
@for (route of routes; track route) { @for (route of routes; track route) {

32
src/app/header/header.component.ts
View file

@ -1,10 +1,10 @@
import {AsyncPipe, Location, TitleCasePipe} from '@angular/common'; import { AsyncPipe, TitleCasePipe } from '@angular/common';
import {Component, OnInit} from '@angular/core'; import { Component, OnInit } from '@angular/core';
import {MatAnchor, MatButton, MatIconButton} from '@angular/material/button'; import { MatAnchor, MatButton, MatIconButton } from '@angular/material/button';
import {MatIcon} from '@angular/material/icon'; import { MatIcon } from '@angular/material/icon';
import {MatToolbar} from '@angular/material/toolbar'; import { MatToolbar } from '@angular/material/toolbar';
import {Router, RouterLink} from '@angular/router'; import { EventType, Router, RouterLink } from '@angular/router';
import {AuthService} from '@core/auth/auth.service'; import { AuthService } from '@core/auth/auth.service';
@Component({ @Component({
selector: 'app-header', selector: 'app-header',
@ -26,22 +26,24 @@ export class HeaderComponent implements OnInit {
constructor( constructor(
private router: Router, private router: Router,
private location: Location,
protected auth: AuthService protected auth: AuthService
) { ) {
} }
ngOnInit(): void { ngOnInit(): void {
this.routes = this.router.config const routes = this.router.config
.filter(route => !route.path?.includes(':')) .filter(route => !route.path?.includes(':'))
.filter(route => !route.path?.includes('/')) .filter(route => !route.path?.includes('/'));
.map(route => ({
this.router.events.subscribe((event) => {
if (event.type != EventType.NavigationEnd) {
return;
}
this.routes = routes.map(route => ({
path: `/${route.path}`, path: `/${route.path}`,
title: route.title as string, title: route.title as string,
class: `/${route.path}` == (this.location.path() || '/') ? 'active' : '' class: `/${route.path}` == event.url ? 'active' : ''
})); }));
});
} }
} }