本篇示範使用Angular Router在兩個Component的template間互相切換。
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。
參考：
沒有留言:
張貼留言