Angular 7路由无法正常刷新页面

Question

这是我的问题：

当我选择导航栏中的一个选项卡时，我不想刷新我的网站。我是角度新手，据我所知，路由器应该在没有重新加载链接的情况下路由到页面。

我在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 directive而不是href。

EG

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