大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章将为大家详细讲解有关Angular中路由有什么用,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
创新互联 - 服务器托管,四川服务器租用,成都服务器租用,四川网通托管,绵阳服务器托管,德阳服务器托管,遂宁服务器托管,绵阳服务器托管,四川云主机,成都云主机,西南云主机,服务器托管,西南服务器托管,四川/成都大带宽,服务器机柜,四川老牌IDC服务商
路由简介
路由是实现单页面应用的一种方式,通过监听hash或者history的变化,渲染不同的组件,起到局部更新的作用,避免每次URL变化都向服务器请求数据。
路由配置
配置路由模块:approuter.module.ts
const routes: Routes = [ { path: "first", component: FirstComponent }, { path: "parent", component: SecondComponent } ] @NgModule({ imports: [ CommonModule, // RouterModule.forRoot方法会返回一个模块,其中包含配置好的Router服务 // 提供者,以及路由库所需的其它提供者。 RouterModule.forRoot(routes, { // enableTracing: true, // <-- debugging purposes only // 配置所有的模块预加载,也就是懒加载的模块,在系统空闲时,把懒加载模块加载进来 // PreloadAllModules 策略不会加载被CanLoad守卫所保护的特性区。 preloadingStrategy: PreloadAllModules }) ], exports: [ FirstComponent, SecondComponent, RouterModule ], declarations: [ FirstComponent, SecondComponent ] }) export class ApprouterModule { }
app.module.ts中引入改模块:
imports: [ ApprouterModule ]
重定向路由:
const routes: Routes = [ { path: "", redirectTo: "first", pathMatch: "full" } ]
通配符路由:
const routes: Routes = [ // 路由器会使用先到先得的策略来选择路由。 由于通配符路由是最不具体的那个,因此务必确保它是路由配置中的最后一个路由。 { path: "**", component: NotFoundComponent } ]
路由懒加载:
配置懒加载模块可以使得首屏渲染速度更快,只有点击懒加载路由的时候,对应的模块才会更改。
const routes: Routes = [ { path: 'load', loadChildren: () => import('./load/load.module').then(m => m.ListModule), // CanLoadModule如果返回false,模块里面的子路由都没有办法访问 canLoad: [CanLoadModule] }, ]
懒加载模块路由配置:
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, //子模块使用forChild配置 RouterModule.forChild(routes) ], declarations: [ LoadComponent, LoadOneComponent, LoadTwoComponent ] }) export class LoadModule { }
懒加载模块路由导航:
LoadOne LoadTwo
路由参数传递:
const routes: Routes = [ { path: "second/:id", component: SecondComponent }, ]
//routerLinkActive配置路由激活时的类 second
获取路由传递的参数:
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); // 这种形式可以捕获到url输入 /second/18 然后点击second // 是可以捕获到的。上面那种是捕获不到的。因为不会触发ngOnInit,公用了一个组件实例。 this.activatedRoute.paramMap.pipe( switchMap((params: ParamMap) => { console.log(params.get('id')); return "param"; })).subscribe(() => { }) } gotoFirst() { this.router.navigate(["/first"]); } }
queryParams参数传值,参数获取也是通过激活的路由的依赖注入
first
路由守卫:canActivate,canDeactivate,resolve,canLoad
路由守卫会返回一个值,如果返回true继续执行,false阻止该行为,UrlTree导航到新的路由。 路由守卫可能会导航到其他的路由,这时候应该返回false。路由守卫可能会根据服务器的值来 决定是否进行导航,所以还可以返回Promise或 Observable,路由会等待 返回的值是true还是false。 canActivate导航到某路由。 canActivateChild导航到某子路由。
const routes: Routes = [ { path: "parent", component: ParentComponent, canActivate: [AuthGuard], children: [ // 无组件子路由 { path: "", canActivateChild: [AuthGuardChild], children: [ { path: "childOne", component: ChildOneComponent }, { path: "childTwo", component: ChildTwoComponent } ] } ], // 有组件子路由 // 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; // 返回Promise的情况 return new Promise((resolve,reject) => { setTimeout(() => { 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路由导航:
one two
canDeactivate路由离开,提示用户没有保存信息的情况。
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获取到组件实例 console.log(component.isLogin); return true; } }
canLoad是否能进入懒加载模块:
const routes: Routes = [ { path: 'load', loadChildren: () => import('./load/load.module').then(m => m.LoadModule), // CanLoadModule如果返回false,模块里面的子路由都没有办法访问 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; } }
resolve配置多久后可以进入路由,可以在进入路由前获取数据,避免白屏
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获取resolve的值
constructor(private route: ActivatedRoute) { } ngOnInit() { const detail = this.route.snapshot.data.detail; console.log(detail); }
监听路由事件:
constructor(private router: Router) { this.router.events.subscribe((event) => { // NavigationEnd,NavigationCancel,NavigationError,RoutesRecognized if (event instanceof NavigationStart) { console.log("NavigationStart"); } }) }
关于“Angular中路由有什么用”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。