angular同一页面跳转重新执行的实现方法

 更新时间:2023年11月17日 16:56:19   作者:钥零零  
这篇文章主要介绍了angular同一页面跳转重新执行的实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

angular同一页面跳转重新执行方法

问题

当收到导航到当前URL的请求,Angular路由器会忽略,重复点击同一链接页面不会刷新,也不会重新执行ngOnInit函数

解决

1、跳转时给Router中增加参数

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

2、在组件中订阅queryParamMap,判断有lang字段就重新执行init方法

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


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

angularjs中界面跳转或返回,界面刷新问题cache:false

问题描述

第一次进界面,按钮可以点击,第二次进去按钮不能点击了,按钮事件是在controller里写的。

解决方法

加上cache:false,即可。表示页面重新刷新加载。

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Angular数据绑定机制原理

    Angular数据绑定机制原理

    本篇文章主要介绍了Angular数据绑定机制原理,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • Angular的模块化(代码分享)

    Angular的模块化(代码分享)

    本文主要对Angular的模块化进行案例分析介绍,具有一定的参考价值,下面跟着小编一起来看下吧
    2016-12-12
  • Angular实现的自定义模糊查询、排序及三角箭头标注功能示例

    Angular实现的自定义模糊查询、排序及三角箭头标注功能示例

    这篇文章主要介绍了Angular实现的自定义模糊查询、排序及三角箭头标注功能,涉及AngularJS针对页面table元素的遍历、查询、判断、排序等相关操作技巧,需要的朋友可以参考下
    2017-12-12
  • 基于Angularjs+mybatis实现二级评论系统(仿简书)

    基于Angularjs+mybatis实现二级评论系统(仿简书)

    这篇文章主要为大家详细介绍了基于Angularjs+mybatis实现二级评论系统,模仿简书效果制作,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • Angular学习笔记之angular的$filter服务浅析

    Angular学习笔记之angular的$filter服务浅析

    本文是小编记录的angular学习笔记,通过本文首先给大家介绍了$filter服务,然后介绍下内置filter及filter的简单使用,非常不错具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-11-11
  • 详解AngularJS验证、过滤器、指令

    详解AngularJS验证、过滤器、指令

    这篇文章主要介绍了AngularJS验证、过滤器、指令的相关知识,angularJS中提供了许多的验证指令,可以轻松的实现验证,具体详情大家通过本文一起学习吧,需要的朋友可以参考下
    2017-01-01
  • Angularjs2不同组件间的通信实例代码

    Angularjs2不同组件间的通信实例代码

    AngualrJs2官方方法是以@Input,@Output来实现组件间的相互传值,而且组件之间必须父子关系,下面给大家提供一个简单的方法,实现组件间的传值,不仅仅是父子组件,跨模块的组件也可以实现传值
    2017-05-05
  • AngularJs bootstrap搭载前台框架——基础页面

    AngularJs bootstrap搭载前台框架——基础页面

    本文主要介绍AngularJs bootstrap搭载前台框架基础页面的建设,这里整理饿了相关资料及实现实例代码,有兴趣的小伙伴可以参考下
    2016-09-09
  • AngularJS入门教程之AngularJS模型

    AngularJS入门教程之AngularJS模型

    这篇文章主要介绍了AngularJS入门教程之AngularJS模型的相关资料,需要的朋友可以参考下
    2016-04-04
  • Angular之jwt令牌身份验证的实现

    Angular之jwt令牌身份验证的实现

    这篇文章主要介绍了Angular之jwt令牌身份验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02

最新评论