您好,登錄后才能下訂單哦!
本篇內(nèi)容主要講解“Angular路由中的懶加載、守衛(wèi)、動態(tài)參數(shù)是什么意思”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“Angular路由中的懶加載、守衛(wèi)、動態(tài)參數(shù)是什么意思”吧!
Angular可以根據(jù)路由,動態(tài)加載相應(yīng)的模塊代碼,這個功能是性能優(yōu)化的利器。
為了加快首頁的渲染速度,我們可以設(shè)計如下的路由,讓首頁盡量保持簡潔、清爽:
const routes: Routes = [ { path: '', children: [ { path: 'list', loadChildren: () => import('./components/list/list.module').then(m => m.ListModule), }, { path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), }, ... ], }, ];
首頁只有一些簡單的靜態(tài)元素,而其他頁面,比如列表、詳情、配置等模塊都用loadChildren
動態(tài)加載。
效果如下:
其中的components-list-list-module-ngfactory.js
文件,只有當(dāng)訪問/list
路由時才會加載。
當(dāng)我們訪問或切換路由時,會加載相應(yīng)的模塊和組件,路由守衛(wèi)可以理解為在路由加載前后的鉤子,最常見的是進(jìn)入路由的守衛(wèi)和離開路由的守衛(wèi):
canActivate 進(jìn)入守衛(wèi)
canDeactivate 離開守衛(wèi)
比如我們想在用戶進(jìn)入詳情頁之前,判斷他是否有權(quán)限,就可以使用canActivate
守衛(wèi)。
{ path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), // 路由守衛(wèi) canActivate: [AuthGuard], },
使用CLI命令創(chuàng)建路由守衛(wèi)模塊:
ng g guard auth
auth.guard.ts
import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router'; import { Observable } from 'rxjs'; import { DetailService } from './detail.service'; @Injectable({ providedIn: 'root' }) export class AuthGuard implements CanActivate { constructor( private detailService: DetailService, ) {} canActivate( route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree { return new Observable(observer => { // 鑒權(quán)數(shù)據(jù)從后臺接口異步獲取 this.detailService.getDetailAuth().subscribe((hasPermission: boolean) => { observer.next(hasPermission); observer.complete(); }); }); } }
獲取權(quán)限的service:
ng g s detail
detail.service.ts
import {Injectable} from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DetailService { constructor( private http: HttpClient, ) { } getDetailAuth(): any { return this.http.get('/detail/auth'); } }
效果如下:
由于我們對/detail
路由增加了守衛(wèi),不管是從別的路由切換到/detail
路由,還是直接訪問/detail
路由,都無法進(jìn)入該頁面。
在路由中帶參數(shù)有很多中方法:
在path中帶參數(shù)
在queryString中帶參數(shù)
不通過鏈接帶參數(shù)
{ path: 'user/:id', loadChildren: () => import('./components/user/user.module').then(m => m.UserModule), },
html傳參
<a [routerLink]="['/list']" [queryParams]="{id: '1'}">...</a>
ts傳參
this.router.navigate(['/list'],{ queryParams: { id: '1' });
注意:通過data傳遞的路由參數(shù)只能是靜態(tài)的
{ path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), // 靜態(tài)參數(shù) data: { title: '詳情' } },
data只能傳遞靜態(tài)參數(shù),那我想通過路由傳遞從后臺接口獲取到的動態(tài)參數(shù),該怎么辦呢?
答案是通過resolve
配置。
{ path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), // 動態(tài)路由參數(shù) resolve: { detail: DetailResolver }, },
detail.resolver.ts
import { Injectable } from '@angular/core'; import { Resolve, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { DetailService } from './detail.service'; @Injectable({ providedIn: 'root' }) export class DetailResolver implements Resolve<any> { constructor(private detailService: DetailService) { } resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any { return this.detailService.getDetail(); } }
detail.service.ts
import {Injectable} from '@angular/core'; import { HttpClient } from '@angular/common/http'; @Injectable({ providedIn: 'root' }) export class DetailService { constructor( private http: HttpClient, ) { } getDetailAuth(): any { return this.http.get('/detail/auth'); } // 增加的 getDetail(): any { return this.http.get('/detail'); } }
創(chuàng)建組件
ng g c detial
detail.component.ts
import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-detail', templateUrl: './detail.component.html', styleUrls: ['./detail.component.scss'] }) export class DetailComponent implements OnInit { constructor( private route: ActivatedRoute, ) { } ngOnInit(): void { // 和獲取靜態(tài)參數(shù)的方式是一樣的 const detail = this.route.snapshot.data.detail; console.log('detail:', detail); } }
到此,相信大家對“Angular路由中的懶加載、守衛(wèi)、動態(tài)參數(shù)是什么意思”有了更深的了解,不妨來實際操作一番吧!這里是億速云網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。