成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

angular4學(xué)習(xí)記錄 -- 路由

FullStackDeveloper / 2300人閱讀

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

Angular4 路由 路由時(shí)傳遞數(shù)據(jù) 1.在查詢參數(shù)中傳遞數(shù)據(jù) 
/product?id=1&name=2 => ActivateRoute.queryParams[id]
2.在路由路徑中傳遞數(shù)據(jù) 
{path:/product/:id} => /product/1 => ActivateRoute.params[id]
3.在路由配置中傳遞數(shù)據(jù) 
{path:product, component:ProductComponent, data:[{isProd:true}] => ActivatedRoute.data[0][isProd]
路由事件
事件 description
NavigationStart 事件開始時(shí)觸發(fā)
RoutesRecognized 在解析完URL，并識(shí)別出了相應(yīng)的路由時(shí)觸發(fā)
RouteConfigLoadStart 在Router對(duì)一個(gè)路由配置進(jìn)行惰性加載之前觸發(fā)
RouteConfigLoadEnd 在Router被惰性加之后觸發(fā)
NavigationEnd 導(dǎo)航成功之后觸發(fā)
NavigationCancel 導(dǎo)航被取消之后觸發(fā)?？赡苁且?yàn)閷?dǎo)航期間某個(gè)路由守衛(wèi)返回了false
NavigationError 在導(dǎo)航發(fā)生意外的錯(cuò)誤時(shí)觸發(fā)
子路由

語法：

const routes: Router = [
    { path: "home", component: HomeComponent },
    { path: "others", component: OthersComponent,
        children: [
            path: "", component: XxxComponent,
            path: "yyy", component: YyyComponent
        ]
    },
]
輔助路由

在頁面中設(shè)置路由插座：

多帶帶開發(fā)一個(gè)新組件，只顯示在新定義的插座上。

通過設(shè)置路由參數(shù)，控制輔助路由的插座是否顯示組件內(nèi)容。

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

路由守衛(wèi)

在設(shè)置路由守衛(wèi)時(shí)需先做下面兩步：

一、在module中添加providers
二、在routing.module中添加需要守衛(wèi)的路由的canActivate 、 canDeactivate 或者 Resolve，前兩個(gè)是數(shù)組形式，Resolve是對(duì)象形式。

CanActivate：處理導(dǎo)航到某路由的情況
在guard文件中實(shí)現(xiàn)CanActivate接口：

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

CanDeactivate：處理從當(dāng)前路由離開的情況
在guard文件中實(shí)現(xiàn)CanDeActivate接口：

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

Resolve：在路由激活之前獲取路由數(shù)據(jù)
在guard文件中實(shí)現(xiàn)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;
         }
    }

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88607.html

相關(guān)文章

  • Angular2 VS Angular4 深度對(duì)比：特性、性能

    摘要：的特性和性能是的超集，用于幫助的開發(fā)。注解提供了連接元數(shù)據(jù)和功能的工具。通過在庫中提供基本信息可以調(diào)用函數(shù)或創(chuàng)建類的實(shí)例來檢查相關(guān)元數(shù)據(jù)，從而簡(jiǎn)化了對(duì)象實(shí)例的構(gòu)建。停用它會(huì)響應(yīng)跳出舊控制器的成功事件。 showImg(https://segmentfault.com/img/bVSqTU?w=850&h=460); 在Web應(yīng)用開發(fā)領(lǐng)域，Angular被認(rèn)為是最好的開源JavaScri...

    孫淑建 評(píng)論0 收藏0

  • angular4學(xué)習(xí)記錄 -- 組件通訊、生命周期

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

    shadajin 評(píng)論0 收藏0

  • 使用angular4.0來搭建一個(gè)博客類的項(xiàng)目

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

    BakerJ 評(píng)論0 收藏0

  • 使用angular4.0來搭建一個(gè)博客類的項(xiàng)目

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

    張憲坤 評(píng)論0 收藏0

  • 使用angular4.0來搭建一個(gè)博客類的項(xiàng)目

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

    littleGrow 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

FullStackDeveloper

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<