這次帶給大家如何使用Angular內Router(路由)應用,使用Angular內Router(路由)應用的注意事項有哪些,下面就是實戰案例,一起來看一下。
序言:
Angular APP 視圖之間的跳轉,依賴Router (路由),這一章,我們來講述Router 的應用
運行結果如下。設定了3個導覽欄, Home、 About、Dashboard。點選不同的導覽列,跳到對應的頁面:
##建立3個component
路由與設定
(1)**引入Angular Router **當用到Angular Router 時,需要引入RouterModule,如下:
// app.module.ts import { RouterModule } from '@angular/router'; imports: [ BrowserModule, RouterModule ],
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { RouterModule } from '@angular/router'; import { appRoutes } from './routerConfig'; import { AppComponent } from './app.component'; import { AboutComponent } from './components/about/about.component'; import { HomeComponent } from './components/home/home.component'; import { DashboardComponent } from './components/dashboard/dashboard.component';
建立 Router Configure 檔案
在 app 目錄下, 建立 routerConfig.ts 檔案。程式碼如下:import { Routes } from '@angular/router'; import { HomeComponent } from './components/home/home.component'; import { AboutComponent } from './components/about/about.component'; import { DashboardComponent } from './components/dashboard/dashboard.component'; export const appRoutes: Routes = [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'dashboard', component: DashboardComponent } ];
JavaScript,所以,檔案的字尾是: ts 而不是js
這個routerConfigue 文件,怎麼呼叫呢?需要把它載入到 app.module.ts 中,這是因為 app.moudle.ts 是整個Angular App 的入口。// app.module.ts import { appRoutes } from './routerConfig'; imports: [ BrowserModule, RouterModule.forRoot(appRoutes) ],
宣告Router Outlet
在app.component.html 檔案中,新增程式碼:<p style="text-align:center"> <h1> {{title}}!! </h1> <nav> <a routerLink="home" routerLinkActive="active">Home</a> <a routerLink="about">About</a> <a routerLink="dashboard">Dashboard</a> </nav> <router-outlet></router-outlet> </p>
執行
#進入到該工程所在的路徑,運行;ng serve --open
關於Router,換一種寫法:
在app.moudle.ts 檔案中,程式碼如下:imports: [ BrowserModule, RouterModule.forRoot( [ { path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'dashboard', component: DashboardComponent } ] ) ],
小結
自從引入了元件導向(component)後,路由管理相比AngularJS (1.X),方便了很多。
進一步優化:或許你已經注意到,當訪問 http://localhost:4200 時,它的路徑應該是 “/”, 我們應該設定這個預設的路徑。{ path: '', redirectTo:'/home', pathMatch: 'full' },
以上是如何使用Angular內Router(路由)應用的詳細內容。更多資訊請關注PHP中文網其他相關文章!