angular - 禁用重新加载页面 Angular 6 路由

Question

我有 Angular 的问题。当我点击一个链接时，浏览器会重新加载站点(Angular 通常只加载与路径连接的组件)。我必须做什么？
Page1 和 Page2 是默认组件。
app.module.ts:

import {RouterModule, Routes} from '@angular/router';
import { Page1Component } from './page1/page1.component';
import { Page2Component } from './page2/page2.component';

const routes: Routes = [
  { path: 'page1', component: Page1Component },
  { path: 'page2', component: Page2Component }
];

@NgModule({
  declarations: [
    AppComponent,
    Page1Component,
    Page2Component
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }   

app.component.ts:

<router-outlet></router-outlet>
<a href="/page1">Page1</a>     
<a href="/page2">Page2</a>

Answer 1

单页应用程序背后的想法是，在获取初始 .html 之后，浏览器永远不会触发对另一个 index.html 页面的请求。
前端导航，由 Angular 的 @angular/router 启用，只是模仿“页面”。

当你打开一个新的 Angular “页面”时，JavaScript 会被执行，它从 DOM 中删除当前可见的元素并用新元素替换它们，形成一个不同外观的屏幕——我们称之为“页面”。

在 anchor 元素 ( href ) 上使用 <a> ，您告诉浏览器从服务器获取另一个页面。相反，您应该告诉 Angular 替换 DOM 元素以形成一个新屏幕。您可以使用 routerLink 指令来执行此操作，该指令在 RouterModule 中可用。

<a routerLink="/page1">Go to page 1</a>

我建议通读 angular.io(Angular 官方网站)上的“英雄之旅”教程。它也涵盖路由。路由也是 covered here 。