Angular 利用路由跳转到指定页面的指定位置方法


Posted in Javascript onAugust 31, 2018

之前做过页面内的跳转,比较简单,最近项目需要实现跨页面跳转,并跳转到指定地点,试了很多方法,有用到传递参数然后让页面滚动相应的距离,但是一旦文章长短发生变化,滚动的距离也需要重新计算,比较麻烦,所以最后总结出这两种比较靠谱的方法,只需要在需要跳转的地方加上合适的id就行,原理和单页面内跳转相似。

detail.component.html

<p>You'll see which payment methods are available to you on the checkout page, before you submit a reservation request. After you select your country, all of your payment details will be shown.</p>
<p id="readMore">We charge featured guide who offer journey a 15% service fee. The amount of the service fee is calculated from the price that featured guide set for their journey. You will see the service fee when you set your price before submitting a journey. The service fee is automatically deducted from the payout to the Host.
  

Depending on the laws of the jurisdiction involved, VAT may be charged on top of the service fee. The service fee will include these VAT charges when applicable.</p>

app.component.html

<button (click)="readMore()">ReadMore</button>

app.route.ts

{ path: '',component: LoginComponent},
 { path: 'detail', component: DetailComponent },
 { path: '**',component: NotFoundComponent}

方法一:新增路由地址来实现

app.route.ts

{ path: '',component: LoginComponent},
 { path: 'detail', component: DetailComponent },
 { path: 'detail#readMore',component: NotFoundComponent},
 { path: '**',component: NotFoundComponent}

app.component.ts

readMore() {
this.router.navigateByUrl('/detail#readMore');
 }

detail.component.ts

ngOnInit() {
 if (window.location.hash === '#readMore') {
  window.location.assign('detail#readMore');
 }
 }

方法二:在原路由地址不变的情况下,利用路由传递参数来实现

app.component.ts

readMore() {
 this.router.navigate(['/detail', { id: 'readMore'}]);
 }
detail.component.ts

this.myActivatedRoute.params.subscribe(
  (data: any) => {
  if (data.id === 'readMore') {
   window.location.assign('detail#readMore');
  }
  }
 );

以上这篇Angular 利用路由跳转到指定页面的指定位置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery.combobox中文api和例子,修复了上面的小bug
Mar 28 Javascript
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
jQuery级联操作绑定事件实例
Sep 02 Javascript
node.js中的fs.mkdirSync方法使用说明
Dec 17 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
JS高仿抛物线加入购物车特效实现代码
Feb 20 Javascript
Vue.js用法详解
Nov 13 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
详解微信小程序缓存--缓存时效性
May 02 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 #Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 #Javascript
Vue加载组件、动态加载组件的几种方式
Aug 31 #Javascript
Bootstrap模态对话框用法简单示例
Aug 31 #Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 #Javascript
angular 实时监听input框value值的变化触发函数方法
Aug 31 #Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 #Javascript
You might like
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
提取HTML标签
2006/10/09 PHP
PHP垃圾回收机制简单说明
2010/07/22 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
PHP结合Redis+MySQL实现冷热数据交换应用案例详解
2019/07/09 PHP
基于BootStrap环境写jQuery tabs插件
2016/07/12 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
2016/11/23 Javascript
layer弹出层框架alert与msg详解
2017/03/14 Javascript
JavaScript运动框架 多值运动(四)
2017/05/18 Javascript
JS点击动态添加标签、删除指定标签的代码
2018/04/18 Javascript
微信小程序input框中加入小图标的实现方法
2018/06/19 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
layui复选框限制选择个数的方法
2019/09/18 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
深入webpack打包原理及loader和plugin的实现
2020/05/06 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
好的Python培训机构应该具备哪些条件
2018/05/23 Python
Python3实现配置文件差异对比脚本
2019/11/18 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
俄罗斯珠宝市场的领导者之一:Бронницкий ювелир
2019/10/02 全球购物
护理自荐信范文
2013/10/05 职场文书
幼儿园教师个人反思
2014/01/30 职场文书
大学自我评价
2014/02/12 职场文书
公司委托书范本
2014/04/04 职场文书
电子工程求职信
2014/07/17 职场文书
教育局党的群众路线教育实践活动整改方案
2014/09/20 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
房屋产权证明书
2014/10/15 职场文书
2014年党务工作总结
2014/11/25 职场文书
电影圆明园观后感
2015/06/03 职场文书
学校教师培训工作总结
2015/10/14 职场文书
大学生,三分钟即兴演讲稿
2019/07/22 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript
Mysql索引失效 数据库表中有索引还是查询很慢
2022/05/15 MySQL