angular4學習記錄 — 路由

navk發表於2019-02-16
Angular路由

Angular4 路由

路由時傳遞資料

1.在查詢引數中傳遞資料

/product?id=1&name=2 => ActivateRoute.queryParams[id]

2.在路由路徑中傳遞資料

{path:/product/:id} => /product/1 => ActivateRoute.params[id]

3.在路由配置中傳遞資料

{path:product, component:ProductComponent, data:[{isProd:true}] => ActivatedRoute.data[0][isProd]

路由事件

事件 description
NavigationStart 事件開始時觸發
RoutesRecognized 在解析完URL，並識別出了相應的路由時觸發
RouteConfigLoadStart 在Router對一個路由配置進行惰性載入之前觸發
RouteConfigLoadEnd 在Router被惰性加之後觸發
NavigationEnd 導航成功之後觸發
NavigationCancel 導航被取消之後觸發。可能是因為導航期間某個路由守衛返回了false
NavigationError 在導航發生意外的錯誤時觸發

子路由

語法：

const routes: Router = [
    { path: `home`, component: HomeComponent },
    { path: `others`, component: OthersComponent,
        children: [
            path: ``, component: XxxComponent,
            path: `yyy`, component: YyyComponent
        ]
    },
]

輔助路由

  1. 在頁面中設定路由插座：<router-outlet name="aux"></router-outlet>
  2. 單獨開發一個新元件，只顯示在新定義的插座上。
  3. 通過設定路由引數，控制輔助路由的插座是否顯示元件內容。

具體設定：{ path: `consult`, component: ConsultComponent, outlet: `aux`}

路由守衛

在設定路由守衛時需先做下面兩步：

一、在module中新增providers
二、在routing.module中新增需要守衛的路由的canActivate 、 canDeactivate 或者 Resolve，前兩個是陣列形式，Resolve是物件形式。

  1. CanActivate：處理導航到某路由的情況
    在guard檔案中實現CanActivate介面：

     canActivate() {
     var hasPermission:boolean = Math.random() < 0.5;
     if(!hasPermission) {
       console.log("使用者無權訪問次股票詳情")
     }
     return hasPermission;
 }

  2. CanDeactivate：處理從當前路由離開的情況
    在guard檔案中實現CanDeActivate介面：

     canDeactivate(component: StockComponent){
     if(component.isFocus()){
       return true;
     }else{
       return window.confirm("關注一下哦。！")
     }
 }

  3. Resolve：在路由啟用之前獲取路由資料
    在guard檔案中實現Resolve介面

         resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
         let id = route.params["id"];
         if(id == 1){
           return new Stock(1, "IBM");
         }else {
           this.router.navigate([`/home`]);
           return undefined;
         }
    }

相關文章