


Routing is a mechanism that maps URL requests to specific codes. It plays an important role in the module division and information architecture of the website. Angular’s routing capabilities are very powerful. We Let’s take a look. [Related tutorial recommendations: "angular tutorial"]
Routing lazy loading
AngularYou can dynamically load the corresponding module code according to the route, this Functions are powerful tools for performance optimization.
In order to speed up the rendering speed of the homepage, we can design the following routing to keep the homepage as simple and refreshing as possible:
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), }, ... ], }, ];
The homepage only has some simple static elements, while other pages, such as lists, Details, configuration and other modules are dynamically loaded using loadChildren
.
The effect is as follows:
The components-list-list-module-ngfactory.js
file can only be accessed when /list
will be loaded only when routing.
Route Guard
When we access or switch routes, the corresponding modules and components will be loaded. Route guards can be understood as hooks before and after route loading. The most common one is the guard that enters the route. And the guard leaving the route:
- canActivate Entering the guard
- canDeactivate Leaving the guard
For example, we want to determine whether the user has access before entering the details page. permissions, you can use the canActivate
guard.
Add routing guard
{ path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), // 路由守卫 canActivate: [AuthGuard], },
Write guard logic
Use CLI command to create a routing guard module:
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 => { // 鉴权数据从后台接口异步获取 this.detailService.getDetailAuth().subscribe((hasPermission: boolean) => { observer.next(hasPermission); observer.complete(); }); }); } }
Get permission service
Get permission 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'); } }
The effect is as follows:
Since we have added guards to the /detail
route, whether it is switching from other routes to the /detail
route, or directly accessing the /detail
route, Can't access this page.
Dynamic routing parameters
There are many ways to bring parameters in routing:
- With parameters in path
- With parameters in queryString
- Without parameters via link
With parameters in path
{ path: 'user/:id', loadChildren: () => import('./components/user/user.module').then(m => m.UserModule), },
With parameters in queryString
htmlPassing parameters
<a [routerLink]="['/list']" [queryParams]="{id: '1'}">...</a>
ts parameter passing
this.router.navigate(['/list'],{ queryParams: { id: '1' });
Pass static parameters through data
Note: Routing parameters passed through data can only be static
{ path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), // 静态参数 data: { title: '详情' } },
Passing dynamic parameters through resolve
data can only pass static parameters. So I want to pass the dynamic parameters obtained from the background interface through routing. What should I do?
The answer is through resolve
configuration.
{ path: 'detail', loadChildren: () => import('./components/detail/detail.module').then(m => m.DetailModule), // 动态路由参数 resolve: { detail: DetailResolver }, },
Create Resolver
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(); } }
Add a method to obtain detailed data in the service
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'); } }
Get dynamic parameters
Create component
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 { // 和获取静态参数的方式是一样的 const detail = this.route.snapshot.data.detail; console.log('detail:', detail); } }
For more programming related knowledge, please visit: Programming Video! !
The above is the detailed content of A brief analysis of lazy loading, guards, and dynamic parameters in Angular routing. For more information, please follow other related articles on the PHP Chinese website!

本篇文章继续Angular的学习,带大家了解一下Angular中的元数据和装饰器,简单了解一下他们的用法,希望对大家有所帮助!

本篇文章带大家深入了解一下angular的状态管理器NgRx,介绍一下NgRx的使用方法,希望对大家有所帮助!

angular中怎么使用monaco-editor?下面本篇文章记录下最近的一次业务中用到的 monaco-editor 在 angular 中的使用,希望对大家有所帮助!

Angular项目过大,怎么合理拆分它?下面本篇文章给大家介绍一下合理拆分Angular项目的方法,希望对大家有所帮助!

本篇文章给大家分享一个Angular实战,了解一下angualr 结合 ng-zorro 如何快速开发一个后台系统,希望对大家有所帮助!

怎么自定义angular-datetime-picker格式?下面本篇文章聊聊自定义格式的方法,希望对大家有所帮助!

Angular Route中怎么提前获取数据?下面本篇文章给大家介绍一下从 Angular Route 中提前获取数据的方法,希望对大家有所帮助!

本篇文章带大家了解一下Angular中的独立组件,看看怎么在Angular中创建一个独立组件,怎么在独立组件中导入已有的模块,希望对大家有所帮助!


Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

AI Hentai Generator
Generate AI Hentai for free.

Hot Article

Hot Tools

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows
This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft

MantisBT
Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

mPDF
mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),
