前言

今天要介紹Angular Routing提供了View之間切換的功能，以及如何使用跟怎麼設定。

Routing如何使用?

1.使用angular/router內建的router
2.將要使用Route的component設定在Routing設定裡面
3.在顯示的頁面裡面，設定route-link
4.當user點擊route-link的時候，顯示頁面

範例

首先我們先有app-component當作首頁，建立兩個component一個是welcome一個是detail。

ComponentComponent

Component建立完，接下來就是要到app.module.ts設定一下Router。

  1. import { RouterModule } from '@angular/router';
  2. 設定RouterModule.forRoot
ConfigurationRouting
  • ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule } from '@angular/router'; // Import RouterModule
import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';
import { DetailComponent } from './detail/detail.component';

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent,
    DetailComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot([
      { path: 'detail', component: DetailComponent },
      { path: 'detail/:id', component: DetailComponent },
      { path: 'welcome', component: WelcomeComponent },
      { path: '', redirectTo: 'welcome', pathMatch: 'full' },
      { path: '**', redirectTo: 'welcome', pathMatch: 'full' },
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

這邊要注意router的設定順序，當第一個比對到了，就不會再往下比對，所以記得把wildcard path的設定放在最後一個。

設定完之後，再經由route-link的方式來連結這兩個component。

route-link
  • html
1
2
3
4
<ul>
  <li><a [routerLink]="['/welcome']">Welcome</a></li>
  <li><a [routerLink]="['/detail']">Detail</a></li>
</ul>

最後使用 <router-outlet></router-outlet> 來決定Component要顯示的位置

router-outlet
  • html
1
2
3
4
5
<ul>
  <li><a [routerLink]="['/welcome']">Welcome</a></li>
  <li><a [routerLink]="['/detail']">Detail</a></li>
</ul>
<router-outlet></router-outlet>

後記

在index.html，會看到<base href="/">這個tag，這是告訴router如何組成navigation URLs，如果沒有這個tag的話，需要再RouterModule設定 useHash:true這樣router才可以正常運作。

RouterModule
  • ts
1
RouterModule.forRoot([], {useHash: true})

參考

angular.io