Update navigation links in Home and Shell components; add child routes for test and test2

This commit is contained in:
Christian Werner 2025-10-21 03:26:04 +02:00
parent 40fde36bc6
commit debe82afdb
4 changed files with 33 additions and 7 deletions

View File

@ -31,6 +31,35 @@ export const routes: Routes = [
title: 'Test',
path: 'test',
component: HomeComponent,
children: [
{
title: 'Test A',
path: 'testa',
component: HomeComponent,
},
{
title: 'Test B',
path: 'testb',
component: HomeComponent,
}
]
},
{
title: 'Test2',
path: 'test2',
component: HomeComponent,
children: [
{
title: 'Test A',
path: 'testa',
component: HomeComponent,
},
{
title: 'Test B',
path: 'testb',
component: HomeComponent,
}
]
}
]
},

View File

@ -1,6 +1,5 @@
<app-link href="/dashboard/test">test</app-link>
<p>home works!</p>
<p>home works!</p>
<p><app-link href="/dashboard/test">test</app-link> - <app-link href="/dashboard/test/testa">testa</app-link> - <app-link href="/dashboard/test/testb">testb</app-link></p>
<p><app-link href="/dashboard/test2">test2</app-link> - <app-link href="/dashboard/test2/testa">testa</app-link> - <app-link href="/dashboard/test2/testb">testb</app-link></p>
<p>home works!</p>
<p>home works!</p>
<p>home works!</p>

View File

@ -23,7 +23,7 @@
@for (crumb of breadcrumbs(); let last = $last; track crumb.label) {
@if (crumb.url && !last) {
<a [routerLink]="crumb.url">{{ crumb.label }}</a>
<app-link [href]="crumb.url">{{ crumb.label }}</app-link>
} @else {
<span>{{ crumb.label }}</span>
}

View File

@ -59,12 +59,10 @@ export class ShellComponent implements OnInit {
private initBreadcrumbs() {
this.breadcrumbs.set(this.buildBreadcrumbs(this.route.root));
console.log('breadcrumbs', this.breadcrumbs());
}
private initNavigation() {
this.navLinks.set(this.extractNavLinks(this.router.config));
console.log('navLinks', this.navLinks())
}
private extractNavLinks(routes: Route[]): Breadcrumb[] {
@ -89,7 +87,7 @@ export class ShellComponent implements OnInit {
const routeURL = child.snapshot.url.map(segment => segment.path).join('/');
if (routeURL) {
url += `${routeURL}`;
url += !url.endsWith('/') ? `/${routeURL}` : `${routeURL}`;
}
const label =