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

之前做过页面内的跳转，比较简单，最近项目需要实现跨页面跳转，并跳转到指定地点，试了很多方法，有用到传递参数然后让页面滚动相应的距离，但是一旦文章长短发生变化，滚动的距离也需要重新计算，比较麻烦，所以最后总结出这两种比较靠谱的方法，只需要在需要跳转的地方加上合适的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 利用路由跳转到指定页面的指定位置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • AngularJS路由实现页面跳转实例

    AngularJS是一个javascript框架,通过AngularJS这个类库可以实现目前比较流行的单页面应用,AngularJS还具有双向数据绑定的特点,更加适应页面动态内容. 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的"跳转"可以理解为是局部页面的跳转. AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现页面"跳转"的实例: 使用app.config来定义不同的lo

  • angular2中router路由跳转navigate的使用与刷新页面问题详解

    本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容,分享出供大家参考学习,下面来看看详细的介绍: 一.router.navigate的使用 navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` interface NavigationExtras { relativeTo :

  • angularjs项目的页面跳转如何实现（5种方法）

    Angular页面传参有多种办法,根据不同用例,我举5种最常见的: PS: 在实际项目中,请参照https://github.com/johnpapa/angular-styleguide优化您的代码. 1. 基于ui-router的页面跳转传参 (1) 在AngularJS的app.js中用ui-router定义路由,比如现在有两个页面,一个页面(producers.html)放置了多个producers,点击其中一个目标,页面跳转到对应的producer页,同时将producerId这个参数

  • AngularJS实现单一页面内设置跳转路由的方法

    本文实例讲述了AngularJS实现单一页面内设置跳转路由的方法.分享给大家供大家参考,具体如下: 单一页面内设置跳转路由 鉴于现在很多应用的应用功能以及场景都非常简单,如果还按照以前的思路,每个页面做一个html,通过路由进行跳转,不仅在时间上会有延迟,在某些特殊的浏览器(最典型的如微信内置浏览器)中,跳转过程中会出现短暂的白页. 因此,我们在开发过程中,将页面逻辑封装到同一个html中.当系统第一次加载页面时,将所有页面全部加载进去,然后通过angularJS内置的路由进行加载. 直接上代码

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

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

  • vue 实现路由跳转时更改页面title

    一.router文件夹下的index文件中给每个path添加meta:{}: export default new Router({ routes: [ { path: '/', name: 'index', component: index, meta: { title: 'title1' } }, { path: '/studentInfo', name: 'studentInfo', component: studentInfo, meta: { title: 'title2' } } ]

  • Vue实现路由跳转至外界页面

    目录 Vue路由跳转至外界页面 解决办法 Vue路由跳转页面的几种方式 总结 Vue路由跳转至外界页面 用法 如果使用路由是在 vue 页面中来回跳转,可以使用 this.$router.push() 实现,但是如果想用这种方法跳转到外部链接就会报错,因为外部页面中是存在 HTTP 等前缀的. 解决办法 1. 在 data 中定义好要跳转的外部链接 data() {     return {         url: 'http://www.baidu.com'     } } 2. 按钮中创建

  • Python下载指定页面上图片的方法

    本文实例讲述了Python下载指定页面上图片的方法.分享给大家供大家参考,具体如下: #!/usr/bin/python #coding:utf8 import re import urllib def getHtml(url): page = urllib.urlopen(url) html = page.read() return html def getImg(html): reg = r'src="(.*?\.jpg)" ' imgre = re.compile(reg) im

  • 动态改变ASP.net页面标题和动态指定页面样式表的方法

    如果需要让asp.net应用程序对用户留有一定有自定义空间,例如用户要对页面使用自己定义的样式表或标题,可以使用下面的方法来动态指定: 首先对ASPX文件中<HEAD>中的页面标题和样式表进行修改 Visual Studio 生成的代码: <title>WebForm1</Title> <LINK ref="stylesheet" type="text/css" href="control.css">

  • Unity打开淘宝app并跳转到商品页面功能的实现方法

    Unity打开淘宝app并跳转到商品页面功能的实现方法

    最近碰到个需求,是希望在Unity有一个按钮,打开后直接跳转淘宝app,打开商品页面.百度了下没有相关的文章,于是我在此分享下. 之前开发游戏的时候就希望引导玩家到应用商店更新游戏,之前采用的方式也是Unity的Application.OpenURL接口,该接口不仅可以跳转到浏览器,还可以跳转到应用并传参数. 打开安卓应用商店,?id=xxx(xxx就是你apk的包名) Application.OpenURL("market://details?id=com.egogame.picoadvent

  • Vue下路由History模式打包后页面空白的解决方法

    vue的路由在默认的hash模式下,默认打包一般不会有什么问题,不过hash模式由于url会带有一个#,不美观,而且在微信分享,授权登录等都会有一些坑.所以history模式也会有一些应用场景.新手往往会碰到history模式打包后页面一片空白的情况,而且没有资源加载错误的报错信息. 这个其实仔细研究下会发现,如果项目直接放的跟目录, 那么是没有问题的,如果是子目录,那么就会一片空白了.这个vue官方有解释,需要加一个base // base: '/history', // mode: 'his

  • .NET中利用js让子窗体向父页面传值的实现方法

    子页面C#后台代码: 复制代码 代码如下: /// <summary>        /// 将设置好的值赋给父页面        /// </summary>        /// <param name="count">需要传递的值</param>        void SetValueToParentPage(int count, string strPersons)       {           StringBuilder

  • C# PDF Page操作设置页面切换按钮的方法

    概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适应不同的程序设计需要,可自行选择合适的添加方法. 说明 这里的代码示例需要使用类库Spire.PDF for .NET,版本4.0 .在使用该类库时,在项目程序中引用Spire.Pdf.dll即可(dll文件在安装路径下的Bin文件中获取). 如: 代码操作示例(供参考) 1.跳转至特定页(首页.下

  • vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码

    有这样一个场景:如果你在登录之前输入了http://localhost:8080/oauth2-mgm-app/#/userManage,想进入userManage页面,但是由于没有登录,系统是不会让你进入这个页面,之后会被定向到login页面.但是在登录之后,认为你有这个权限了,就需要重新定向到userManage页面.大致流程图如图1所示: 图1 登录后跳转到未登录前指定页面流程图 在vue-route的官方文档里其实有给到过这个demo,官方文档链接在此:https://router.vu

随机推荐