angular 5 routing正在重新加载整个页面

时间:2018-03-04 11:45:40

标签: angular angular5

我遇到了角5的问题。 我使用了带有角度cli的全新安装:新的测试 - 路由,但它似乎不仅重新加载整个页面的部分。 有人有同样的问题吗?

路由模块

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>

1 个答案:

答案 0 :(得分:9)

您应该尝试在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会告诉浏览器导航到给定的网址。但你想要的是告诉Angular导航到URL。