Question

嗨，我对Angular有问题。当我单击链接时，浏览器将重新加载站点（Abgular通常仅加载与path连接的组件）。我该怎么办？

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中删除当前可见的元素，并用新元素替换它们，从而形成一个外观不同的屏幕，我们称之为“页面”。

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

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

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

Answer 2

使用href将在该anchor标签上执行URL重定向，该重定向的确在同一标签上进行（因为考虑了target='_self' on anchor）。

使用Angular Router API提供的routerLink指令，该指令有助于在SPA页面之间导航。

<a routerLink="/page1">Page1</a>     
<a routerLink="/page2">Page2</a>

Answer 3

href代表超级引用，用于在多页应用程序的多页之间切换。由于角度应用程序主要是SPA's (Single Page Applications)，因此routerLink是一个角度指令，用于加载页面中的组件。使用routerLink仅刷新页面上的组件，而不刷新整个页面。因此，您应该使用routerLink来防止页面刷新。以下应该是您的app.component.ts的内容：

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

禁用重新加载页面Angle 6路由

3 个答案: