Shulou(Shulou.com)06/03 Report--

This article will explain in detail what is the use of routing in Angular. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Introduction to routin

Routing is a way to achieve a single-page application, by listening to hash or history changes, rendering different components, play the role of local update, to avoid every URL change to the server to request data.

Routing configuration

Configure routing module: approuter.module.ts

Const routes: Routes = [{path: "first", component: FirstComponent}, {path: "parent", component: SecondComponent}] @ NgModule ({imports: [CommonModule, / / RouterModule.forRoot method returns a module containing the configured Router service / / provider, as well as other providers required by the routing library. RouterModule.forRoot (routes, {/ / enableTracing: true, / / import ('. / load/load.module'). Then (m = > m.ListModule), / / CanLoadModule if false is returned, none of the sub-routes in the module can access canLoad: [CanLoadModule]},]

Lazy load module routing configuration:

Import {NgModule} from'@ angular/core';import {CommonModule} from'@ angular/common';import {LoadComponent} from'. / Load.component';import {RouterModule, Routes} from'@ angular/router';import {LoadTwoComponent} from'. / app/components/LoadTwo/LoadTwo.component';import {LoadOneComponent} from'. / app/components/LoadOne/LoadOne.component' Const routes: Routes = [{path: ", component: LoadComponent, children: [{path:" LoadOne ", component: LoadOneComponent}, {path:" LoadTwo ", component: LoadTwoComponent}]},] @ NgModule ({imports: [CommonModule, / / submodule uses forChild to configure RouterModule.forChild (routes)] Declarations: [LoadComponent, LoadOneComponent, LoadTwoComponent]}) export class LoadModule {}

Lazy load module routing navigation:

LoadOneLoadTwo

Routing parameters are passed:

Const routes: Routes = [{path: "second/:id", component: SecondComponent},] / / routerLinkActive configure class second when routing is activated

Get the parameters passed by the route:

Import {ActivatedRoute, ParamMap, Router} from'@ angular/router';import {Component, OnInit} from'@ angular/core';import {switchMap} from 'rxjs/operators' @ Component ({selector: 'app-second', templateUrl:'. / second.component.html', styleUrls: ['. / second.component.scss']}) export class SecondComponent implements OnInit {constructor (private activatedRoute: ActivatedRoute, private router: Router) {} ngOnInit () {console.log (this.activatedRoute.snapshot.params); / / {id: "12"} / / console.log (this.activatedRoute) / / this form can capture url input / second/18 and then click second/ / can capture. The kind above can't be caught. Because ngOnInit is not triggered, a component instance is shared. This.activatedRoute.paramMap.pipe (switchMap ((params: ParamMap) = > {console.log (params.get ('id')); return "param";}). Subscribe () = > {})} gotoFirst () {this.router.navigate (["/ first"]);}}

The queryParams parameter passes a value, and the parameter is also obtained through the dependency injection of the active route.

First

Routing Guard: canActivate,canDeactivate,resolve,canLoad

The route guard returns a value, and if the return true continues, false blocks the behavior, and UrlTree navigates to the new route. The route guard may navigate to another route, which should return false. The routing guard may decide whether to navigate based on the value of the server, so it can also return Promise or Observable, and the route will wait for the return value to be true or false. CanActivate navigates to a route. CanActivateChild navigates to a child route.

Const routes: Routes = [{path: "parent", component: ParentComponent, canActivate: [AuthGuard], children: [/ / No component child route {path: ", canActivateChild: [AuthGuardChild], children: [{path:" childOne " Component: ChildOneComponent}, {path: "childTwo", component: ChildTwoComponent}]], / / have component child routes / / children: [/ / {path: "childOne", component: ChildOneComponent}, / / {path: "childTwo" Component: ChildTwoComponent} / /]} import {Injectable} from'@ angular/core' Import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from'@ angular/router';@Injectable ({providedIn: 'root',}) export class AuthGuard implements CanActivate {canActivate (next: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {/ / return true; / / return Promise return new Promise ((resolve,reject) = > {resolve (true);}, 3000) })} import {Injectable} from'@ angular/core';import {ActivatedRouteSnapshot, RouterStateSnapshot, CanActivateChild} from'@ angular/router';@Injectable ({providedIn: 'root',}) export class AuthGuardChild implements CanActivateChild {constructor () {} canActivateChild (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {return true;}}

Parent.component.html routing Navigation:

Onetwo

The canDeactivate route leaves, indicating that the user has not saved the information.

Const routes: Routes = [{path: "first", component: FirstComponent, canDeactivate: [CanDeactivateGuard]}] import {FirstComponent} from'. / components/first/first.component';import {RouterStateSnapshot} from'@ angular/router';import {ActivatedRouteSnapshot} from'@ angular/router';import {Injectable} from'@ angular/core';import {CanDeactivate} from'@ angular/router' @ Injectable ({providedIn: 'root',}) export class CanDeactivateGuard implements CanDeactivate {canDeactivate (component: any, route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {/ / component get the component instance console.log (component.isLogin); return true;}}

Whether canLoad can enter the lazy loading module:

Const routes: Routes = [{path: 'load', loadChildren: () = > import ('. / load/load.module') .then (m = > m.LoadModule), / / CanLoadModule if false is returned, none of the sub-routes in the module can access canLoad: [CanLoadModule]}] import {Route} from'@ angular/compiler/src/core';import {Injectable} from'@ angular/core' Import {CanLoad} from'@ angular/router';@Injectable ({providedIn: 'root',}) export class CanLoadModule implements CanLoad {canLoad (route: Route): boolean {return true;}}

How long after the resolve is configured, you can enter the route and get the data before entering the route to avoid the white screen.

Const routes: Routes = [{path: "resolve", component: ResolveDemoComponent, resolve: {detail: DetailResolver}] import {Injectable} from'@ angular/core';import {Resolve, ActivatedRouteSnapshot, RouterStateSnapshot} from'@ angular/router' @ Injectable ({providedIn: 'root'}) export class DetailResolver implements Resolve {constructor () {} resolve (route: ActivatedRouteSnapshot, state: RouterStateSnapshot): any {return new Promise ((resolve,reject) = > {setTimeout () = > {resolve ("resolve data");}, 3000);})}}

ResolveDemoComponent gets the value of resolve

Constructor (private route: ActivatedRoute) {} ngOnInit () {const detail = this.route.snapshot.data.detail; console.log (detail);}

Listen for routing events:

Constructor (private router: Router) {this.router.events.subscribe ((event) = > {/ / NavigationEnd,NavigationCancel,NavigationError,RoutesRecognized if (event instanceof NavigationStart) {console.log ("NavigationStart") }})})} this is the end of this article on "what is the use of routing in Angular?". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, please share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.