Angular 7 маршрутизация не работает должным образом, она обновляет страницу

Question

Вот проблема, с которой я столкнулся:

Я не хочу обновлять свой веб-сайт, когда выбираю одну из вкладок на панели навигации.Я новичок в angular и, как я понимаю, маршрутизатор должен маршрутизировать страницу без перезагрузки ссылки.

Мой код в app-routing-module

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { BlogComponent } from './blog/blog.component'
import { AboutComponent } from './about/about.component'

const routes: Routes = [
  { path: '', component: HomeComponent},
  { path: 'blog', component: BlogComponent},
  { path: 'about', component: AboutComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Мой код в app.component.html

<link href="https://fonts.googleapis.com/css?family=Kotta+One" rel="stylesheet">

<div class="sidenav">
<ul>
  <li><a href="/" class="custom-underline">Home</a></li>
  <li><a href="/blog">Blog</a></li>
  <li><a href="/about">About</a></li>

  <iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3" width="300" height="80" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>
</ul>
</div>
<router-outlet></router-outlet>

Счастливых праздников!

Answer 1

Вы должны использовать директиву routerLink в своих ссылках вместо href.

например

<a routerLink="/blog">Blog</a>