I have a navigation bar that I want to modify for scrolling behavior based on the type of link.
For href links with the "#" symbol, I want the navigation bar to scroll down. However, for routerLink links, I want the page to navigate to the specified route:
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand js-scroll-trigger" href="#page-top">hFinder</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#cards">Cards</a>
</li>
<li class="nav-item">
<a class="nav-link js-scroll-trigger" href="#impressum">Impressum</a>
</li>
<li class="nav-item">
<a class="nav-link" [routerLink]="['/']">Start</a>
</li>
</ul>
</div>
</div>
Although the link is positioned at the top, clicking it does not work. The card and impressum sections scroll down as expected.
https://i.sstatic.net/Kxdvk.png
Below is the content of the app-routing.module.ts file:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SedcardComponent } from './sedcard/sedcard.component';
import { StartComponent } from './start/start.component';
const routes: Routes = [
{ path: '', component: StartComponent },
{ path: 'sedcard/:id', component: SedcardComponent }
];
@NgModule({
imports: [RouterModule.forRoot(routes, {enableTracing: true} )],
exports: [RouterModule]
})
export class AppRoutingModule { }
Additionally, here are the details from the console:
Router Event: NavigationStart NavigationStart(id: 1, url: '/') NavigationStart {id: 1, url: "/", navigationTrigger: "imperative", restoredState: null}
Router Event: RoutesRecognized RoutesRecognized(id: 1, url: '/', urlAfterRedirects: '/', state: Route(url:'', path:'') { Route(url:'', path:'') } ) RoutesRecognized {id: 1, url: "/", urlAfterRedirects: "/", state: RouterStateSnapshot}