詳解angular筆記路由之a(chǎn)ngular-router
更新時間：2017年09月12日 08:32:16 作者：喝不醉再來
本篇文章主要介紹了詳解angular筆記路由之a(chǎn)ngular-router，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了angular筆記路由之a(chǎn)ngular-router，分享給大家，具體如下：
創(chuàng)建項目
ng new router --routing \\ 加routing參數(shù) \\ 會新增一個app-routing.module.ts 文件
路由的基本使用
| 名稱 | 簡介 |
|---|---|
| Routes | 路由的配置，保存著哪一個URL對應(yīng)展示哪一個組件和在哪一個RouterOutler展示 |
| RouterOutler | 在HTML中標(biāo)記路由內(nèi)容呈現(xiàn)的占位符指令 |
| Router | 運行時執(zhí)行的路由對象，可以通過navigate()和navigateByUrl()方法來導(dǎo)航到指定路由 |
| RouterLink | 在HTML中聲明導(dǎo)航的指令 |
| ActivatedRoute | 當(dāng)前激活的路由對象，保存著當(dāng)前路由信息，路由地址，路由參數(shù) |
路由對象圖示
路由基本配置
const routes:Routes = [
{path:'',component:HomeComponent}, \\ 注意path里面不要加\線
{path:'app',component:AdminComponent}
];
路由通配符配置
{path:'**',component:Code404Component}
// 配置里面加一條代表沒有的都往這里，注意這里不能寫在前面，不然angualr的路由會優(yōu)先匹配這里
HTML里面跳轉(zhuǎn)鏈接
<a [routerLink]="['/']">主頁</a> <a [routerLink]="['/app']">后臺</a> <router-outlet></router-outlet>
在js里面跳轉(zhuǎn)路由
<input type='button' value='跳轉(zhuǎn)到后臺' (click)="toApp()">
constructor(private router:Router){
}
// 點擊事件
toApp(){
this.router.navigate(['/app'])
}
路由數(shù)據(jù)傳遞
1、在查詢參數(shù)中傳遞數(shù)據(jù)
/app?id=2 => ActivatedRoute.queryParams[id]
//html寫法
<a [routerLink]="['/app']" [queryParams]="{id:1}">后臺</a>
// js寫法
private appId:number
constructor(private routerInfo:ActivatedRoute) { }
ngOnInit() {
this.appId = this.routerInfo.snapshot.queryParams['id']
}
2、在路由路徑中傳遞數(shù)據(jù)
{path:/app/:id} => /app/1 => ActivatedRoute.params[id]
// 必須先定義好
<a [routerLink]="['/app',1]">后臺</a>
3、在路由配置中傳遞數(shù)據(jù)
復(fù)制代碼 代碼如下:
{path:/product,component:Appcomponent,data:[IsProd:true]} => ActivatedRoute.data[0][IsProd]
參數(shù)快照和參數(shù)訂閱
snapshot 是參數(shù)快照當(dāng)路由進入該組件的時候，然后再點擊按鈕進入該路由路由里面的的ngOnInit()方法只執(zhí)行一次，已經(jīng)被激活，說以第二次這個不會被執(zhí)行
ngOnInit() {
this.appId = this.routerInfo.snapshot.queryParams['id']
}
subscribe 是參數(shù)訂閱,這個屬于RxJs的東西
private appId:number
constructor(private routerInfo:ActivatedRoute) { }
ngOnInit() {
this.routerInfo.params.subscribe((params:Params) => {
this.appId = params['id']
})
}
重定向路由
{path:'',redirectTo:'/home',pathMatch:'full'},
子路由
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
]},
// 記得去HomeComponent，里面添加<router-outlet></router-outlet>指令
輔助路由
// html 視圖部分
<router-outlet></router-outlet>
<router-outlet name='aux'></router-outlet>
//路由配置部分
{path:'app',Appcomponet,outlet:'aux'}
路由守衛(wèi)
只有當(dāng)用戶已經(jīng)登錄并擁有一些權(quán)限時才能進入
多表單組成的向?qū)В缱粤鞒?，只有滿足條件才能進入下一個路由
用戶執(zhí)行操作沒有保存，試圖離開時候進行相關(guān)提示
| 名稱 | 說明 |
|---|---|
| CanAxtivate | 處理導(dǎo)航到某路由 |
| CanDeactivate | 處理當(dāng)前路由離開 |
| Resolve | 在路由激活前獲取路由數(shù)據(jù) |
1.CanAxtivate的使用
// 新建一個文件
import {CanActivate} from '@angular/router'
export class LoginGuard implements CanActivate{
// 路由會根據(jù)這個方法的返回如果返回false就拒絕訪問
canActivate(){
let isLOgin:boolean = true;
return isLOgin;
}
}
canActivate是一個數(shù)組，可以接收多個，當(dāng)每一個都返回ｔｒｕｅ時候才允許
// 修改路由配置，添加一個屬性canActivate
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
],canActivate:[LoginGuard]},
修改NgModule
providers:[LoginGuard]
2.CanDeactivate的使用
// 新建一個文件
import {CanDeactivate} from '@angular/router'
import {AppComponent} from "../app.component";
/**
* 處理用戶離開
* 接收一個泛型
*/
export class OutGuard implements CanDeactivate<AppComponent>{
// component 里面保存著AppComponent的數(shù)據(jù)
canDeactivate(component:AppComponent){
return window.confirm('您還沒有保存確定要離開嗎？')
}
}
修改路由的配置
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
],canActivate:[LoginGuard],canDeactivate:[OutGuard]},
providers:[LoginGuard,OutGuard]
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法
這篇文章主要介紹了angular+ionic 的app上拉加載更新數(shù)據(jù)實現(xiàn)方法，需要的的朋友參考下2017-01-01
Angular 2父子組件數(shù)據(jù)傳遞之局部變量獲取子組件其他成員
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間數(shù)據(jù)傳遞之局部變量獲取子組件其他成員的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
這篇文章主要介紹了AngularJS壓縮JS的操作技巧,分析了AngularJS進行壓縮（minify）之后出現(xiàn)的問題與相應(yīng)的解決方法,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了詳解AngularJS中自定義指令的使用,包括結(jié)合自定義HTML標(biāo)簽的使用,需要的朋友可以參考下2015-06-06
Angular 的 Change Detection機制實現(xiàn)詳解
這篇文章主要為大家介紹了Angular 的 Change Detection機制實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
這篇文章主要介紹了詳解@angular/cli 改變默認啟動端口兩種方式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
angular-ui-sortable實現(xiàn)可拖拽排序列表
這篇文章主要介紹了angular-ui-sortable實現(xiàn)可拖拽排序列表，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了詳解angular應(yīng)用容器化部署，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例
這篇文章主要介紹了AngularJS對動態(tài)增加的DOM實現(xiàn)ng-keyup事件示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
一個緩存就是一個組件，它可以透明地儲存數(shù)據(jù)，以便以后可以更快地服務(wù)于請求。這篇文章主要介紹了AngularJS中的緩存使用，有興趣的可以了解一下。2017-01-01