Angular 5 - 页面刷新路由而不是 DOM 更新答案

【问题标题】：Angular 5 - Page refreshing on route instead of DOM updateAngular 5 - 页面刷新路由而不是 DOM 更新
【发布时间】：2018-02-22 14:00:04
【问题描述】：

我开始了一个新的 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 应该在不刷新的情况下更新。

【问题讨论】：

标签： angular

【解决方案1】：

将href 替换为routerLink

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

RouterLink 用于实现相同的功能，但角度为 2 或以上是单页应用程序，页面不应重新加载。 RouterLink 导航到 New Url 并且组件被渲染到位在不重新加载页面的情况下使用 routeroutlet。

【讨论】：