網頁

2019/6/15

Angular 使用wildcard route (**) 處理無效的URL

在設計Angular元件的Route時,對於錯誤或非預期的URL請求,可以透過配置wildcard route來攔截,並返回預先設計好的結果。

首先使用Angular CLI建立一個Angular專案

Angular專案建好後先把app.component.html的預設內容刪除,只留下<router-outlet></router-outlet>

app.component.html

<router-outlet></router-outlet>

接著在專案目錄下分別輸入以下命令來建立HelloComponentPageNotFoundComponent
ng generate component hello
ng generate component page-not-found
請參考使用Angular CLI建立新的Component元件

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

D:\myapps\demo>ng generate component page-not-found
CREATE src/app/page-not-found/page-not-found.component.html (33 bytes)
CREATE src/app/page-not-found/page-not-found.component.spec.ts (672 bytes)
CREATE src/app/page-not-found/page-not-found.component.ts (299 bytes)
CREATE src/app/page-not-found/page-not-found.component.css (0 bytes)
UPDATE src/app/app.module.ts (581 bytes)

開啟page-not-found.component.html將內容修改如下。

page-not-found.component.html

<h1>錯誤,Page Not Found!!</h1>

關於下面Route的設定,建議先參考使用Angular Router切換頁面template


開啟app-routing.module.ts

routes: Routes新增到HelloComponent的path:
{ path:'hello', component:HelloComponent }
並將HelloComponent import進app-routing.module.ts

routes: Routes新增處理錯誤URL的path:
{ path:'**', component:PageNotFoundComponent } 將結果導向PageNotFoundComponent
並把PageNotFoundComponent import進app-routing.module.ts

設定完後如下。

app-routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HelloComponent } from './hello/hello.component'; // <-- import
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; // <-- import


const routes: Routes = [
  { path:'hello', component:HelloComponent }, // 導向HelloComponent, 後面記得加上逗號
  { path:'**', component:PageNotFoundComponent } // 錯誤的URL都會導向PageNotFoundComponent,要放在Routes陣列的最後
];

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

導向PageNotFoundComponent的path即為wildcard route (**),表示任何不在Route中的URL都會被導向PageNotFoundComponent的template。

注意wildcard route必須放在其他route的後面,也就是Routes陣列中最後的位置,因為Angular的URL路徑匹配是採first match wins strategy,會返回第一個找到的批配路徑,若將wildcard route的配置擺在其他route的前面,則所有的URL都會被導向wildcard route路徑的Component。


開啟瀏覽器並在位址欄輸入http://localhost:4200/hello會正確地導向HelloComponent的template,也就是hello.component.html



若在瀏覽器位址欄輸入任何其他的URL,例如http://localhost:4200/abc,因為abc並不在Route設定的path,所以會導向 PageNotFoundComponent




參考:

沒有留言:

張貼留言