Angular 同一路由跳转时组件重新执行的实现方法

Angular同一页面跳转重新执行的方法详解

问题描述

当用户点击导航链接，但当前页面恰好就是目标URL时，Angular路由器会默认忽略此次导航请求。换言之，重复点击相同链接无法触发页面刷新，组件生命周期钩子ngOnInit也不会再次运行。这类情况在单页应用中非常普遍，然而某些业务场景下确实需要强制刷新页面，该如何处理？

解决方案

解决思路其实很直接——在路由跳转时为Router添加查询参数，以此强制Angular识别为一次新的导航：

this.router.na vigate([path],{queryParams:{lang:'zh-cn'}})

接着在目标组件中订阅queryParamMap，一旦监测到lang参数存在，立即手动执行初始化逻辑：

constructor(
    private sanitizer: DomSanitizer,
    private routerInfo: ActivatedRoute,) {
      this.routerInfo.queryParamMap.subscribe(params => {
        if (params.get('lang')) {
          this.init();
        }
     });
   }

init(): void{
    console.log('重新执行了')
}

这种方法巧妙利用查询参数的变化触发Angular路由事件，从而使组件感知到“导航”动作，重新执行必要的业务逻辑。

AngularJS中界面跳转或返回时界面刷新问题的cache:false解决方案

问题描述

第一次进入某个界面时，按钮功能正常；但从其他页面返回或再次跳转进来后，按钮完全点击无效。明明按钮事件已在controller中定义，为何控制器像“失忆”一样？

解决方法

根本原因在于AngularJS路由状态默认缓存了视图，导致控制器不会重新初始化。只需加上cache:false配置，即可强制每次进入页面时重新加载：

.state('tab.shouye', {
    cache:false,
    url: '/shouye',
    views: {
      'tab-shouye': {       
        templateUrl: 'App/Views/tab-shouye.html',     
        controller: 'shouyeCtrl'
      }
    }
  })

这样每次切换到该状态时，模板和控制器都会重新实例化，按钮事件自然恢复可用。

总结

两个框架下的解决思路本质相通：要么让路由器识别到一次真正的“导航”（Angular使用查询参数），要么关闭视图缓存强制重新初始化（AngularJS采用cache:false）。实际开发中可根据具体场景灵活选用相应方案。