解决Angular2 router.navigate刷新页面的问题


Posted in Javascript onAugust 31, 2018

造成这个问题一般是因为我们在<form>表单中使用<button>时忘记添加type属性,在表单中,如果忘记给按钮添加属性,会默认为submit,如果在子元素中会向上冒泡触发submit

<button (click)="toDetail()">detail</button>
toDetail() {
 this._router.navigate(['/detail']);
}

解决方法:

1.添加type

<button type="button" (click)="toDetail()">detail</button>

2.click添加false

<button (click)="toDetail();false">detail</button>

3.函数返回false

toDetail:boolean(){
 return false;
}

以上这篇解决Angular2 router.navigate刷新页面的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
ie7+背景透明文字不透明超级简单的实现方法
Jan 17 Javascript
javascript 中that的含义示例介绍
May 14 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
浅谈 Vue v-model指令的实现原理
Jun 08 Javascript
Vue 兄弟组件通信的方法(不使用Vuex)
Oct 26 Javascript
vue自定v-model实现表单数据双向绑定问题
Sep 03 Javascript
vue实现打印功能的两种方法
Sep 07 Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
javascript实现随机抽奖功能
Dec 30 Javascript
浅谈angularJS2中的界面跳转方法
Aug 31 #Javascript
详解vue使用vue-layer-mobile组件实现toast,loading效果
Aug 31 #Javascript
Angular2之二级路由详解
Aug 31 #Javascript
基于jQuery ztree实现表格风格的树状结构
Aug 31 #jQuery
详解Vue CLI3配置之filenameHashing使用和源码设计使用和源码设计
Aug 31 #Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 #Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
Aug 31 #Javascript
You might like
php时间戳转换的示例
2014/03/31 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
PHP面向对象程序设计组合模式与装饰模式详解
2016/12/02 PHP
一个js写的日历(代码部分网摘)
2009/09/20 Javascript
javascript unicode与GBK2312(中文)编码转换方法
2013/11/14 Javascript
node.js学习总结之调式代码的方法
2014/06/25 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
jQuery阻止移动端遮罩层后页面滚动
2017/03/15 Javascript
webpack进阶——缓存与独立打包的用法
2017/08/02 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
vue实现某元素吸顶或固定位置显示(监听滚动事件)
2017/12/13 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
2018/01/18 Javascript
基于JS实现html中placeholder属性提示文字效果示例
2018/04/19 Javascript
Vuepress 搭建带评论功能的静态博客的实现
2019/02/17 Javascript
基于node.js实现爬虫的讲解
2019/02/18 Javascript
vue中axios的二次封装实例讲解
2019/10/14 Javascript
python分析nignx访问日志脚本分享
2015/02/26 Python
10个易被忽视但应掌握的Python基本用法
2015/04/01 Python
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
python调用OpenCV实现人脸识别功能
2018/05/25 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
Tensorflow中的图(tf.Graph)和会话(tf.Session)的实现
2020/04/22 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
Python 爬虫性能相关总结
2020/08/03 Python
详解pycharm连接远程linux服务器的虚拟环境的方法
2020/11/13 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
HTML5调用手机发短信和打电话功能
2020/04/29 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
KEEN美国官网:美国人气户外休闲鞋品牌
2021/03/09 全球购物
大班幼儿评语大全
2014/04/30 职场文书
市级青年文明号申报材料
2014/05/26 职场文书
团队精神口号
2014/06/06 职场文书
小学班主任自我评价
2015/03/11 职场文书
职工的安全责任书范文!
2019/07/02 职场文书
分享CSS盒子模型隐藏的几种方式
2022/02/28 HTML / CSS