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

2023-09-08 12:28:04 67

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

detail.component.html

You'llseewhichpaymentmethodsareavailabletoyouonthecheckoutpage,beforeyousubmitareservationrequest.Afteryouselectyourcountry,allofyourpaymentdetailswillbeshown.

Wechargefeaturedguidewhoofferjourneya15%servicefee.Theamountoftheservicefeeiscalculatedfromthepricethatfeaturedguidesetfortheirjourney.Youwillseetheservicefeewhenyousetyourpricebeforesubmittingajourney.TheservicefeeisautomaticallydeductedfromthepayouttotheHost. Dependingonthelawsofthejurisdictioninvolved,VATmaybechargedontopoftheservicefee.TheservicefeewillincludetheseVATchargeswhenapplicable.

app.component.html

ReadMore

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利用路由跳转到指定页面的指定位置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

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

热门推荐

随机推荐