今天要來介紹如何使用Roting來切換頁面

透過Routing可以決定所要顯示的Page
預設透過 Angular CLI 建立的為 app-routing.module.ts
Angular裡我們會在 app-routing.module.ts設定相關Routing，

在專案一開始加入 default routing

可以在專案一開始的時候就新增 routring

ng new routing-test
? Would you like to add Angular routing? Yes

之後 Angular CLI 就會在專案目錄 app 底下新增一個 app-routing.module.ts，引用 Routes 以及 RouterModule 外，還新增了一個空 routes 變數，而且 routes 是透過 RouterModule.forRoot(routes) 匯入，Angular 在執行時只有一個根路由當作起點，

其他相關路由會子路由的身分則可透過 RouterModule.forChild(routes) 附加到根路由內。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

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

在 新增 module的時候

我們透過 ng g m home --routing 建立 HomeModule，因為多加了 --routing 參數，所以 CLI 多幫我們建立一個路由模組 home-routing.module.ts。

ng g m home --routing

其中

• g-> generate產生
• m-> module
• route-> 名稱

在 template 上 加上 <router-outlet> 的 Directive

在 template 上 加上 <router-outlet> 可以達到在當切換 routers 時，可以切換不同 component 的效果

範例

在以下的範例我們專案會有三個主要頁面

1. Home
2. Servers
   • 顯示跟編輯Servers
   • 一個可以用來更新以及重新載入的 Service
3. Users
   • 用來查看目前的 User

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UsersComponent,
    ServersComponent,
    UserComponent,
    EditServerComponent,
    ServerComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    RouterModule.forRoot(appRoutes)
  ],
  providers: [ServersService],
  bootstrap: [AppComponent]
})
export class AppModule { }

然後在 template上加入對應的 routerLink

<ul class="nav nav-tabs">
    <li role="presentation" routerLinkActive="active"
          [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/">Home</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a [routerLink]="['servers']">Servers</a>
    </li>
    <li role="presentation" routerLinkActive="active">
        <a [routerLink]="['users']">Users</a>
    </li>
</ul>

在上面的範例中，除了使用 routerLink 設定對應的連結外，還透過 routerLinkActive 去改變它的 css， 當 router 為當下那個 link 時，就會將在該link 加上對應的 css

除了可以用 routerLink ， 到該頁面外，還可以透過 呼叫函式的方式透過 router.navigate 直接連結到該頁面

home.component.ts

export class HomeComponent implements OnInit {

  constructor(private _router: Router) { }

  ngOnInit() {
  }
  onLoadServers() {
    this._router.navigate(['servers']);
  }
}

透過 Router 傳資料到 Component

可以透過 :value的方式在 router 上傳入想要的參數

const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'users', component: UsersComponent },
  { path: 'users/:id/:name', component: UsersComponent },
  { path: 'servers', component: ServersComponent }
];

之後就可以透過 ActivatedRoute 將 傳進的變數傳進並且做使用

export class UserComponent implements OnInit {
  user: { id: number, name: string };

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.user = {
      id: this.route.snapshot.params['id'],
      name: this.route.snapshot.params['name']
    };
    this.route.params.subscribe((params: Params) => {
      this.user.id = params['id'];
      this.user.name = params['name'];
    });
  }

}

參考

1. Angular 子路由
2. [Angular 6] Routing