如何定義Routes

1. 在app.module.ts定義routes

  1. import RouterModule和Routes
  2. 定義routes
  3. 將routes imports到NgModule
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 步驟1 -->
import { RouterModule, Routes } from '@angular/router';

<!-- 步驟2 -->
const appRoutes: Routes =  [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent }, 
  { path: 'servers', component: ServersComponent }, 
];

<!-- 步驟3 -->
@NgModule({
    declarations: [
        ...,
        HomeComponent, UsersComponent, ServersComponent
    ],
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    ...
})

註：這裡將appRoutes寫在app.module.ts裡面，較好的做法是新建一個app-routing.module.ts，以便將路由的資訊另外存放。

2. 在app.component.html使用

上面定義的appRoutes，是在切換到不同path時，會render的component。
因此在html以router-outlet來標記出render的位置：

1
2
3
4
5
6
7
8
<div>
    <ul class="nav">
        <li>Home</li>
        <li>Servers</li>
        <li>Users</li>
    </ul>
</div>
<router-outlet></router-outlet>

3. 使用routerLink切換路由

建立好router之後，直覺的想法是會使用：<a href="/users">Users</a>。
但使用a標籤的話，每次點擊都會重啟app，因此Angular有提供不會重啟的屬性routerLink，有兩種寫法：

1
2
3
4
5
6
7
<ul class="nav">
    <li><a routerLink="/">Home</a></li>
    <!-- 寫法一 -->
    <li><a routerLink="/servers">Servers</a></li>
    <!-- 寫法二 -->
    <li><a [routerLink]="['/users']">Users</a></li>
</ul>

在component層級切換路徑

1. html定義事件

點擊按鈕觸發事件：

1
<button (click)="onLoadPage()">Load Page</button>

2. Typescript定義function

注入(inject)Router並使用，例子是按鈕點擊後會到servers頁面：

1
2
3
4
5
6
7
8
@Component({...})
export class LoadComponent {
    constructor(private: router: Router) {}

    onLoadPage() {
        this.router.navigate(['/servers]);
    }
}

根據網址切換css樣式

導航列nav可能會因當前的頁面，而有不同的css樣式，透過routerLinkActive可以幫我們達成，每個route都要加，加完之後在切換route的時候，會套用active這個樣式。

由於routerLinkActive是透過routerLink來判定，當url只有”/“的時候，代表這個a標籤在所有時候都會active。
因此使用routerLinkActiveOptions來限縮，只有在url「完全符合」才會套用active樣式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="nav">
    <li>
        <a 
            routerLink="/"
            routerLinkActive="active"
            [routerLinkActiveOptions]="{exact: true}">
            Home
        </a>
    </li>
    <li>
        <a 
            routerLink="/servers"
            routerLinkActive="active">
            Servers
        </a>
    </li>
</ul>