網頁

▼

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.html及second.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]比較一下就可以發現routerLink與href的差別。routerLink是Angular的內部路由並不會重新載入整個頁面，這也是Angular作為單頁應用程式(SPA)框架的重要特色；而href是HTML元素屬性，每次點選時都會重新載入連結頁面的資源，整個頁面會被重新刷新，而非載入部分內容。


參考：

沒有留言:

張貼留言