iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 19
1
Modern Web

Angular 8 從推坑到放棄系列 第 19

[Day 18] 如何使用 Angular Routing

今天要來介紹如何使用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

上一篇
[Day 17]Angular Dynamic Form
下一篇
[Day 19] 初步使用 Observable
系列文
Angular 8 從推坑到放棄30

尚未有邦友留言

立即登入留言