解决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 相关文章推荐
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
调用HttpHanlder的几种返回方式小结
Dec 20 Javascript
JavaScript通过select动态更换图片的方法
Mar 23 Javascript
15个常用的jquery代码片段
Dec 19 Javascript
JS生成不重复的随机数组的简单实例
Jul 10 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
vue v-for 使用问题整理小结
Aug 04 Javascript
node后端服务保活的实现
Nov 10 Javascript
JavaScript实现一键复制内容剪贴板
Jul 23 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编写和读取XML的几种方式
2013/01/12 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
PHP实现一个按钮点击上传多个图片操作示例
2020/01/23 PHP
鼠标拖拽移动子窗体的JS实现
2014/02/25 Javascript
javascript常用方法汇总
2014/12/02 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JavaScript实现瀑布流布局
2020/06/28 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
微信小程序 获取微信OpenId详解及实例代码
2016/10/31 Javascript
Node.js中多进程模块Cluster的介绍与使用
2017/05/27 Javascript
node.js中http模块和url模块的简单介绍
2017/10/06 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
JavaScript模块管理的简单实现方式详解
2019/06/15 Javascript
关于ckeditor在bootstrap中modal中弹框无法输入的解决方法
2019/09/11 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
js实现全选和全不选
2020/07/28 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
[15:28]DOTA2 HEROS教学视频教你分分钟做大人-剧毒术士
2014/06/13 DOTA
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
Python实现配置文件备份的方法
2015/07/30 Python
python导入时小括号大作用
2017/01/10 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
Python with语句上下文管理器两种实现方法分析
2018/02/09 Python
Python实现按逗号分隔列表的方法
2018/10/23 Python
python爬虫实现获取下一页代码
2020/03/13 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
超级实用的8个Python列表技巧
2020/08/24 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
化验室技术员岗位职责
2013/12/24 职场文书
镇党委书记群众路线整改措施思想汇报
2014/10/13 职场文书
教师工作决心书
2015/02/04 职场文书
一篇文章带你了解Python和Java的正则表达式对比
2021/09/15 Python