詳解angular筆記路由之angular-router
更新時間：2017年09月12日 08:32:16 作者：喝不醉再來
本篇文章主要介紹了詳解angular筆記路由之angular-router，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了angular筆記路由之angular-router，分享給大家，具體如下：
創(chuàng)建項目
ng new router --routing \\ 加routing參數 \\ 會新增一個app-routing.module.ts 文件
路由的基本使用
| 名稱 | 簡介 |
|---|---|
| Routes | 路由的配置，保存著哪一個URL對應展示哪一個組件和在哪一個RouterOutler展示 |
| RouterOutler | 在HTML中標記路由內容呈現的占位符指令 |
| Router | 運行時執(zhí)行的路由對象，可以通過navigate()和navigateByUrl()方法來導航到指定路由 |
| RouterLink | 在HTML中聲明導航的指令 |
| ActivatedRoute | 當前激活的路由對象，保存著當前路由信息，路由地址，路由參數 |
路由對象圖示
路由基本配置
const routes:Routes = [
{path:'',component:HomeComponent}, \\ 注意path里面不要加\線
{path:'app',component:AdminComponent}
];
路由通配符配置
{path:'**',component:Code404Component}
// 配置里面加一條代表沒有的都往這里，注意這里不能寫在前面，不然angualr的路由會優(yōu)先匹配這里
HTML里面跳轉鏈接
<a [routerLink]="['/']">主頁</a> <a [routerLink]="['/app']">后臺</a> <router-outlet></router-outlet>
在js里面跳轉路由
<input type='button' value='跳轉到后臺' (click)="toApp()">
constructor(private router:Router){
}
// 點擊事件
toApp(){
this.router.navigate(['/app'])
}
路由數據傳遞
1、在查詢參數中傳遞數據
/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、在路由路徑中傳遞數據
{path:/app/:id} => /app/1 => ActivatedRoute.params[id]
// 必須先定義好
<a [routerLink]="['/app',1]">后臺</a>
3、在路由配置中傳遞數據
復制代碼 代碼如下:
{path:/product,component:Appcomponent,data:[IsProd:true]} => ActivatedRoute.data[0][IsProd]
參數快照和參數訂閱
snapshot 是參數快照當路由進入該組件的時候，然后再點擊按鈕進入該路由路由里面的的ngOnInit()方法只執(zhí)行一次，已經被激活，說以第二次這個不會被執(zhí)行
ngOnInit() {
this.appId = this.routerInfo.snapshot.queryParams['id']
}
subscribe 是參數訂閱,這個屬于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)
只有當用戶已經登錄并擁有一些權限時才能進入
多表單組成的向導，如注冊流程，只有滿足條件才能進入下一個路由
用戶執(zhí)行操作沒有保存，試圖離開時候進行相關提示
| 名稱 | 說明 |
|---|---|
| CanAxtivate | 處理導航到某路由 |
| CanDeactivate | 處理當前路由離開 |
| Resolve | 在路由激活前獲取路由數據 |
1.CanAxtivate的使用
// 新建一個文件
import {CanActivate} from '@angular/router'
export class LoginGuard implements CanActivate{
// 路由會根據這個方法的返回如果返回false就拒絕訪問
canActivate(){
let isLOgin:boolean = true;
return isLOgin;
}
}
canActivate是一個數組，可以接收多個，當每一個都返回ｔｒｕｅ時候才允許
// 修改路由配置，添加一個屬性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的數據
canDeactivate(component:AppComponent){
return window.confirm('您還沒有保存確定要離開嗎？')
}
}
修改路由的配置
{path:'home',component:HomeComponent,children:[
{path:'',component:IndexComponent}
],canActivate:[LoginGuard],canDeactivate:[OutGuard]},
providers:[LoginGuard,OutGuard]
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Renderer2 類是 Angular 提供的一個抽象服務,允許在不直接操作 DOM 的情況下操縱應用程序的元素,本文給大家介紹了如何在 Angular 中使用 Renderer2,文中通過代碼示例給大家講解的非常詳細,需要的朋友可以參考下2024-03-03
AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用示例
這篇文章主要介紹了AngularJs入門教程之環(huán)境搭建+創(chuàng)建應用的方法,較為詳細的分析了AngularJS的功能、下載及應用創(chuàng)建方法,需要的朋友可以參考下2016-11-11
今天小編就為大家分享一篇Angularjs之ngModel中的值驗證綁定方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
下面小編就為大家?guī)硪黄猂equireJS 依賴關系的實例(推薦)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
ng-events類似ionic中Events的angular全局事件
這篇文章主要介紹了ng-events類似ionic中Events的angular全局事件,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2018-09-09
在AngularJS中使用jQuery的zTree插件的方法
這篇文章主要介紹了在AngularJS中使用jQuery的zTree插件的方法,Angular中集成了jqLite,但還不是完全版的jQuery,需要的朋友可以參考下2016-04-04
這篇文章主要為大家詳細介紹了angular4自定義組件的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
今天小編就為大家分享一篇Angular2之二級路由詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
AngularJS應用表達式是純javascript表達式，并輸出它們被使用的數據在那里。本文給大家介紹AngularJS入門教程之AngularJS表達式，對angularjs表達式相關知識感興趣的朋友一起學習吧2016-04-04
深入淺析AngularJS中的一次性數據綁定 (bindonce)
這篇文章主要介紹了AngularJS中的一次性數據綁定 (bindonce)知識,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-05-05