網頁

▼

2019/6/8

Angular 使用Angular Router切換頁面template

本篇示範使用Angular Router在兩個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。

D:\myapps\demo>ng g c first
CREATE src/app/first/first.component.html (24 bytes)
CREATE src/app/first/first.component.spec.ts (621 bytes)
CREATE src/app/first/first.component.ts (265 bytes)
CREATE src/app/first/first.component.css (0 bytes)
UPDATE src/app/app.module.ts (471 bytes)

D:\myapps\demo>ng g c second
CREATE src/app/second/second.component.html (25 bytes)
CREATE src/app/second/second.component.spec.ts (628 bytes)
CREATE src/app/second/second.component.ts (269 bytes)
CREATE src/app/second/second.component.css (0 bytes)
UPDATE src/app/app.module.ts (553 bytes)

然後開啟app-routing.module.ts，
在變數routes: Routes中新增路由到FirstComponent及SecondComponent的path，分別為：

  • 導向FirstComponent:{path:'first', component:FirstComponent}
  • 導向SecondComponent:{path:'second', component:SecondComponent}

並記得將FirstComponent及SecondComponent import進app-routing.module.ts。

Routes的內容實際上是由多個Route組成的陣列，每一個Route負責配置一個路由。

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 { }

也就是說，當URL切換成對應的路徑(path)時，Angular Router會根據該路徑去顯示對應的Component template。

例如此時你在瀏覽器網址
輸入http://localhost:4200/first會導向FirstComponent的template，
輸入http://localhost:4200/second會導向SecondComponent的template。




接著修改first.component.ts及first.component.html。

在FirstComponent的建構式中注入router:Router服務，
並記得加上import { Router } from '@angular/router';。

Angular本身提供了依賴注入(Dependency Inject)框架，可將依賴的服務(service)或物件(object)注入至需要用到的類別中來使用。


然後新增一個toSecondComponent()方法，使用注入的router物件的navigate()方法導向SecondComponent的template。

navigate()接收參數為陣列，所以用[]包起，而參數內容'second'即為要導向的path。

first.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; // <-- import

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor(private router:Router) { } // <-- 注入router:Router

  ngOnInit() {
  }

  toSecondComponent() {
    this.router.navigate(['second']); // <-- 導向SecondComponent
  }

}

在first.component.html新增一個按鈕<button>，並綁定click事件至FirstComponent.toSecondComponent()。

first.component.html

<p>
  first works!
</p>
<button (click)="toSecondComponent()">To SecondComponent</button>


以同樣地方式修改second.component.ts及second.component.html。
差別僅在於router導向的是FirstComponent。

second.component.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; // <-- import

@Component({
  selector: 'app-second',
  templateUrl: './second.component.html',
  styleUrls: ['./second.component.css']
})
export class SecondComponent implements OnInit {

  constructor(private router:Router) { } // <-- 注入router:Router

  ngOnInit() {
  }

  toFirstComponent() {
    this.router.navigate(['first']); // <-- 導向FirstComponent
  }

}

在second.component.html新增一個按鈕<button>，並綁訂click事件至SecondComponent.toSecondComponent()。

second.component.html

<p>
  second works!
</p>
<button (click)='toFirstComponent()'>To FirstComponent</button>


完成後在瀏覽器輸入http://localhost:4200/first會導向FirstComponent的template頁面，點選按鈕可切換至SecondComponent的template頁面。

點選SecondComponent template中的按鈕又會切換回FirstComponent的template。




參考：

沒有留言:

張貼留言