您现在的位置是: 首页 » 网页代码 » angular2如何监听路由变化
网页代码

angular2如何监听路由变化

网站优化小编十一月 25, 2019 15人已围观

路由是 Angular 应用程序的核心,它加载与所请求路由相关联的组件,以及获取特定路由的相关数据。这允许我们通过控制不同的路由,获取不同的数据,从而渲染不同的页面。

网站运营中栏目排名优化技巧

angular监听路由变化的方法:

Angular路由配置非常简单,但是路由通过Observables使用起来也非常强大。我们可以在根组件中全局监听路由的变化:

ngOnInit() {
  this.router.events
    .subscribe((event) => {
      // example: NavigationStart, RoutesRecognized, NavigationEnd
      console.log(event);
    });
}

router.events()

router.events()是一个observable对象,我们可以通过订阅它来获取路由变化的相关信息

evnets提供了以上诸多类型的事件,方便我们根据事件的类型进行过滤

constructor(private ref: ChangeDetectorRef, private router: Router) {}ngOnInit() {
  this.routerEventsListener = this.router.events  
  .filter(event => event instanceof NavigationEnd) //根据事件的类型进行过滤
  .subscribe((event) => {
    // your operation
    this.ref.detectChanges(); //我的操作
  });}

大家一定要注意保护自己的操作,因为router.events是全局的,所以在组件内使用时,最好在ngOndestory()中unsubscribe

ngOnDestroy() {
  this.routerEventsListener.unsubscribe();
}

文章评论

    发表评论

    电子邮件地址不会被公开。

站点信息
  • 站点运行:228天
  • 网站程序:Wordpress
  • 主题模板:bvseo
  • 文章统计:3199 条
  • 文章评论:21 条
  • 微信公众号:扫描二维码,关注我们