angular4學習記錄 -- 路由

FullStackDeveloper 發布于2019-08-21 16:41 / 2297人閱讀

摘要：通過設置路由參數，控制輔助路由的插座是否顯示組件內容。具體設置路由守衛在設置路由守衛時需先做下面兩步一在中添加二在中添加需要守衛的路由的或者，前兩個是數組形式，是對象形式。在路由激活之前獲取路由數據在文件中實現接口

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
        ]
    },
]

輔助路由

在頁面中設置路由插座：

多帶帶開發一個新組件，只顯示在新定義的插座上。

通過設置路由參數，控制輔助路由的插座是否顯示組件內容。

具體設置：{ path: "consult", component: ConsultComponent, outlet: "aux"}

路由守衛

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

一、在module中添加providers
二、在routing.module中添加需要守衛的路由的canActivate 、 canDeactivate 或者 Resolve，前兩個是數組形式，Resolve是對象形式。

CanActivate：處理導航到某路由的情況
在guard文件中實現CanActivate接口：

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

CanDeactivate：處理從當前路由離開的情況
在guard文件中實現CanDeActivate接口：

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

Resolve：在路由激活之前獲取路由數據
在guard文件中實現Resolve接口

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88607.html

Angular2 VS Angular4 深度對比：特性、性能

摘要：的特性和性能是的超集，用于幫助的開發。注解提供了連接元數據和功能的工具。通過在庫中提供基本信息可以調用函數或創建類的實例來檢查相關元數據，從而簡化了對象實例的構建。停用它會響應跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應用開發領域，Angular被認為是最好的開源JavaScri...

孫淑建 2019-08-20 18:37 評論0 收藏0
angular4學習記錄 -- 組件通訊、生命周期

摘要：每完成被投影組件內容發生變化時調用。每次做完組件視圖和子組件視圖的變更檢測之后調用。組件銷毀時調用，主要用于內存回收。策略策略是當組件的輸入屬性發生變更時才會檢查當前組件及其子組件。 angular4 組件通訊、生命周期主要通訊形式父組件通過屬性綁定到子組件，子組件通過事件傳遞參數到父組件父組件通過局部變量獲取子組件的引用父組件使用@ViewChild獲取子組件的引用兩個不...

shadajin 2019-08-21 16:45 評論0 收藏0
使用angular4.0來搭建一個博客類的項目

摘要：前言也就是的最新版本最近也是大紅大紫的公司項目主管推上學習日程自己也就抽時間寫了一個小的博客類的意在于去看一下最新的特性和的語法由于剛接觸和所以有點小糙望見諒項目原址我是項目地址我是地址項目簡介整個項目是使用腳手架搭建的項目目錄結構項目功前言 angular也就是angular.js的最新版本,最近也是大紅大紫的公司項目主管推上學習日程,自己也就抽時間寫了一個小的博客類的demo,意...

BakerJ 2019-08-20 17:39 評論0 收藏0
使用angular4.0來搭建一個博客類的項目

摘要：前言也就是的最新版本最近也是大紅大紫的公司項目主管推上學習日程自己也就抽時間寫了一個小的博客類的意在于去看一下最新的特性和的語法由于剛接觸和所以有點小糙望見諒項目原址我是項目地址我是地址項目簡介整個項目是使用腳手架搭建的項目目錄結構項目功前言 angular也就是angular.js的最新版本,最近也是大紅大紫的公司項目主管推上學習日程,自己也就抽時間寫了一個小的博客類的demo,意...

張憲坤 2019-08-29 12:52 評論0 收藏0
使用angular4.0來搭建一個博客類的項目

摘要：前言也就是的最新版本最近也是大紅大紫的公司項目主管推上學習日程自己也就抽時間寫了一個小的博客類的意在于去看一下最新的特性和的語法由于剛接觸和所以有點小糙望見諒項目原址我是項目地址我是地址項目簡介整個項目是使用腳手架搭建的項目目錄結構項目功前言 angular也就是angular.js的最新版本,最近也是大紅大紫的公司項目主管推上學習日程,自己也就抽時間寫了一個小的博客類的demo,意...

littleGrow 2019-08-01 17:04 評論0 收藏0