我在使用 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>
最佳答案
您应该尝试使用 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。
关于 Angular 5 路由正在重新加载整个页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49095021/