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