Angular 5 - 在路由上刷新页面而不是DOM更新

Question

我开始了一个全新的Angular 5项目并按照Angular Documentation实现了路由，但页面在路由事件上刷新而不是更新DOM。

以下是我对app.module.ts的导入

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
...
const appRoutes: Routes = [
    { path: 'app-signup', component: SignupComponent, data: { title: 'Sign Up' } 
},
...
imports: [
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // <-- debugging purposes only
    ),
    BrowserModule
],

此外，这是相关的app.component.html代码：

...
<router-outlet></router-outlet>
...
<a href="/app-signup" routerLinkActive="active">Sign Up,</a>

页面重新加载后，我看到路由器插座中显示正确的组件，但DOM应该更新而不刷新。

Answer 1

将href替换为routerLink

  

href是用于导航到另一个页面的html锚标签属性。这里将加载一个新页面。

     

RouterLink用于实现相同的功能，但角度为2或   以上是单页面应用程序，其中页面不应重新加载。   RouterLink导航到New Url，组件就地呈现   routeroutlet没有重新加载页面。