網頁

2019/12/31

Angular 使用routeLink切換頁面

本篇介紹使用routeLink在兩個Component template間切換。

首先使用Angular CLI建立一個Angular專案

Angular專案建好後把app.component.html的預設內容刪除,
只留下<router-outlet></router-outlet>

app.component.html

<router-outlet></router-outlet>

接著用Angular CLI建立兩個Component,第一個是FirstComponent,第二個是SecondComponent。


然後開啟app-routing.module.ts
在變數routes: Routes中新增路由到FirstComponent及SecondComponent的path,分別為:

  • 導向FirstComponent:{path:'first', component:FirstComponent}
  • 導向SecondComponent:{path:'second', component:SecondComponent}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { FirstComponent } from './first/first.component'; // <-- import
import { SecondComponent } from './second/second.component'; // <-- import

const routes: Routes = [
  {path:'first', component:FirstComponent}, // to FirstComponent
  {path:'second', component:SecondComponent} // to SecondComponent
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

完成Routes設定後,當URL輸入對應路徑(path)時,Angular Router會根據路徑顯示對應的Component template。

在瀏覽器輸入http://localhost:4200/first會導向FirstComponent的template;



在瀏覽器輸入http://localhost:4200/second會導向SecondComponent的template。



接著在first.component.htmlsecond.component.html利用<a>搭配routeLink路由至另一個Component。


修改first.component.html如下。

first.component.html

<p>
  first works!
</p>
<p>Route link <a routerLink="/second">to SecondComponent</a></p>

修改second.component.html如下。

second.component.html

<p>
  second works!
</p>
<p>Route link <a routerLink="/first">to FirstComponent</a></p>

完成後在瀏覽器輸入http://localhost:4200/first導向FirstComponent的template頁面。

點選first.component.html中的to SecondComponent連結可切換至second.component.html
點選second.component.html中的to FirstComponent連結又會切換回first.component.html




你可能會注意到如果<a>使用href屬性也是可以導向另一個頁面,例如下面把原來的routerLink改成href指向另個頁面的連結。

first.component.html

<p>
  first works!
</p>
<p>Route link <a href="/second">to SecondComponent</a></p>

second.component.html

<p>
  second works!
</p>
<p>Route link <a href="/first">to FirstComponent</a></p>

不過開啟瀏覽器的開發模式的[Network]比較一下就可以發現routerLinkhref的差別。routerLink是Angular的內部路由並不會重新載入整個頁面,這也是Angular作為單頁應用程式(SPA)框架的重要特色;而href是HTML元素屬性,每次點選時都會重新載入連結頁面的資源,整個頁面會被重新刷新,而非載入部分內容。


參考:

沒有留言:

張貼留言