Angular 5 路由正在重新加载整个页面

Question

我在使用 Angular 5 时遇到问题。我使用了带有 Angular cli 的全新安装:ng new Test --routing，但它似乎重新加载了整个页面，而不仅仅是这一部分。有人遇到过同样的问题吗？

路由模块

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import {GalleryComponent} from './gallery/gallery.component';
import {MainComponent} from './main/main.component';

const routes: Routes = [
    {
        path: '',
        component: MainComponent
    },
    {
        path: 'gallery',
        component: GalleryComponent
    }
];

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

导航代码

<ul class="navbar-nav navbar-left">
  <li class="nav-item">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
   </li>
   <li class="nav-item">
       <a class="nav-link" href="/gallery">Galerie</a>
   </li>
</ul>

Answer 1

您应该尝试使用 routerLink而不是 href <a> 中的属性标签。

<ul class="navbar-nav navbar-left">
  <li class="nav-item">
        <a class="nav-link" routerLink="/">Home <span class="sr-only">(current)</span></a>
   </li>
   <li class="nav-item">
       <a class="nav-link" routerLink="/gallery">Galerie</a>
   </li>
</ul>

一个标准href将告诉浏览器导航到给定的 URL。但你想要的是告诉 Angular 导航到 URL。