angular11源码探索二十五[Router路由事件]

摘要:
RouterEvent触发事件的条件:routerLink、navigateByUrl()、navigate()路由器的整个事件体验,而不是与特定路线相关的事件。在官方网站classMyService{constructor{router.events.pipe.subscribe;}}上的一个小例子中,我们发现默认刷新页面包含路由事件,并且刷新是NavigationEndNavigationStart启动时触发的事件。navigationTrigger标识触发导航的呼叫或事件。路由保护返回false exportclassTwoServiceimplementsCanActivate{//如果在导航过程中返回false路由保护,则会得到NavigationCancel事件。

RouterEvent

触发事件的条件: routerLink ,navigateByUrl() , navigate()

路由器整个经历的事件经历,而不是与特定路由相关的事件。对任何给定的导航触发一次。

上官网给的小案例

class MyService {
  constructor(public router: Router, logger: Logger) {
    router.events.pipe(
       filter((e: Event): e is RouterEvent => e instanceof RouterEvent)
    ).subscribe((e: RouterEvent) => {
      logger.log(e.id, e.url);
    });
  }
}

我们发现默认刷新页面有路由事件,刷新的是NavigationEnd

NavigationStart

当导航开始时触发的事件。

navigationTrigger

识别触发导航的呼叫或事件。

* 'imperative'触发器是对' router.navigateByUrl() '或' router.navigate() '的调用。
* popstate 的触发器  Location.方法 跳转
* hashchange 暂时没发现使用方法
navigationTrigger?: 'imperative'|'popstate'|'hashchange';

restoredState

pushStatepopstate事件触发导航时,先前提供给呼叫的导航状态。否则为null。

写个案例你就懂了

<a [routerLink]="['a']" [state]="{foo: 'bar'}">aaa</a><br>
<a [routerLink]="['b']">bbb</a><br>
<a [routerLink]="['c']">ccc</a><br>
<a [routerLink]="['d']">ddd</a><br>
<bution (click)="clickMethod()">返回</button>
export class TwoComponent implements OnInit {

  constructor(
    private router:Router,
    private location:Location
  ) {
    this.router.events.pipe(
      filter((e:Event)=>(e instanceof NavigationStart))
    ).subscribe(res=>{
      console.log(res);
        // {id: 2, url: "/home/b", navigationTrigger: "imperative", restoredState: null}
    })
  }
 
  clickMethod() {
    this.location.back()
  }
}

当我们点击返回的时候,相当于通过restoredState 拿到之前的路由状态,类似滚动位置,state,hash,问好传参等, 参数参考NavigationExtras

RoutesRecognized

​ 当路由被识别时触发的事件

NavigationError

​ 由于意外错误导致导航失败时触发的事件。

当前路由 `/d`, 访问一个不存在的路由,报错信息,返回是当前的路由
export class TwoComponent implements OnInit {

  constructor(
    private router: Router,
    private location: Location
  ) {
    this.router.events.subscribe(e=>{
      if (e instanceof NavigationError) {
        console.log(e.url);
		// 跳转报错的Url  /home/dcccc
        console.log(router.url); 
          //  /d
        console.log(location.path());
          //  /d
      }
    }
}            
如果你想去掉控制台的报错信息,然后也不影响 NavigationError事件的正常的查询
    this.router.navigate(['/home/dcccc']).catch(()=>null)                            

NavigationCancel

当导航被直接或间接取消时触发的事件。

路由守卫返回false

export class TwoService implements CanActivate{
// 如果您有在导航过程中返回的路线保护false,您将获得一个NavigationCancel事件。返回值是false,Promise解析为false还是Observable发出都没有关系false。最终结果将是相同的。
    canActivate() {
      // Case 1
      return false;

      // Case 2
      return Promise.resolve(false);

      // Case 3
      return new Observable<boolean>(observer => {
        observer.next(false);
        observer.complete();
      });
    }     
}
const routes: Routes = [{ path: '', component: TwoComponent,children:[
    {path:'a',component:AComponent},
    {path:'b',component:BComponent,
    canActivate:[TwoService]
    },
    {path:'c',component:CComponent},
  ] }];

export class TwoComponent implements OnInit {

  constructor(
    private router: Router,
    private location: Location
  ) {
    this.router.events.subscribe(e=>{
      if (e instanceof NavigationCancel) {
        console.log(e);// 当前要跳转的事件信息
        console.log(location.path());
          //当前没跳转到的事件,加入当前是 /c 保存不变,路由守卫被拦截啦
      }
    })
  }
}    

当重定向也会触发

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean {
//手动启动一个新的导航和
//通过返回false取消当前的  
    this.router.navigateByUrl('/home/d')
    return false
//第二种方法
      //路由器将自动取消
	 //当前的导航并开始一个新的
    this.router.parseUrl('/home/d')      
  }
// NavigationCancel {id: 5, url: "/home/b", reason: "Navigation ID 5 is not equal to the current navigation id 6"}

导航路线

NavigationStart  
	当导航开始时触发此事件
    触发条件: popState(浏览器的前进/后退),navigateByUrl(),navigate()
	如果是popState触发,那么我们获取前一个的状态
	//如果跳转的是懒加载的路由路径
    RouteConfigLoadStart
        当延迟加载路由之前

    RouteConfigLoadEnd
        当延迟加载路由之后

RoutesRecognized
	当路由被识别时触发的事件。

GuardsCheckStart
	路由守卫阶段开始
    
ChildActivationStart
	路由解析阶段的子孩子激活部分开始
    
ActivationStart
	路由激活部分开始时触发
    
GuardsCheckEnd
	路由守卫阶段结束时
    
ResolveStart
	解决延迟守卫阶段开始
    
ResolveEnd
	解决延迟守卫结束
    
ActivationEnd
	路由激活部分结束时触发

ChildActivationEnd
	路由解析阶段的子孩子激活结束时

Scroll
	由滚动触发的事件
    
NavigationEnd
	导航成功结束时触发的事件
    
    NavigationCancel
        当导航被直接或间接取消时触发的事件。

    NavigationError
        由于意外错误导致导航失败时触发的事件。

在懒加载中出来加载过长

可以通过懒加载的路由事件去修改

this.router.events.subscribe(event => {
    if (event instanceof RouteConfigLoadStart) {
 	   this.isRouteLoading = true;
    } else if (event instanceof RouteConfigLoadEnd) {
 	   this.isRouteLoading = false;
    }
});

免责声明:文章转载自《angular11源码探索二十五[Router路由事件]》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇AS3嵌入字体后端跨域的N种方法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

vue可调整大小和可拖动的组件---vue-draggable-resizable

border:位置:调整大小=“onResize”:{{width}};{{高度}}&lt;importVueDraggableResizablefrom'vue-dragable-resizeable'导出默认值{data:height:methods:y){this.x=xthis.y=y}}}&lt;...

Qt 调用本地浏览器打开URL

单击一些Qt控件以查找本地浏览器传递的URL以打开前端。...

C#控件重绘学习(一)

由于需要制作工业控制软件,传统的控制已不能满足实际要求,因此控制的重新绘制迫在眉睫。因为考研花费了很多时间,而C#的学习已经搁浅了很长时间,所以我打算借此机会仔细彻底地研究控件的重新绘制。首先,查看Button的旧背景:namespace:SystemWindows.Forms程序集:System.Windows.FormsButton具有太多属性:例如Ba...

C# Winform Treeview控件

WinformTreeview控件目录手动添加节点。丰富节点数据并清除所有节点信息。选择指定的节点。函数GetAllTreeNodeWinformTreeview控件手动添加节点//在根节点下添加根节点和子节点TreeNodeCollectionRoot=treeView1.Nodes;TreeNodecurNode=根。添加(“良好”);curN(电流)...

libffi

Thisislibffi.info,由libffi.texi生产的bymakeinfo版本5.1。本手册适用于libffi,一个可移植的外国函数接口库。版权所有(C)200820102011redhat,股份有限公司。许可授予复制、分发...

jenkins之部署、启动、关闭

jenkins可以通过内置的应用服务器或者借助其他应用服务器启动目录1、启动jenkins2、关闭jenkins3、重启jenkins4、重新加载jenkins配置信息前言:部署jenkins应用,是要安装java的,最新版本的jenkins是需要按照1.8版本的jdk,不然启动不了。...