Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法
之前做過(guò)頁(yè)面內(nèi)的跳轉(zhuǎn),比較簡(jiǎn)單,最近項(xiàng)目需要實(shí)現(xiàn)跨頁(yè)面跳轉(zhuǎn),并跳轉(zhuǎn)到指定地點(diǎn),試了很多方法,有用到傳遞參數(shù)然后讓頁(yè)面滾動(dòng)相應(yīng)的距離,但是一旦文章長(zhǎng)短發(fā)生變化,滾動(dòng)的距離也需要重新計(jì)算,比較麻煩,所以最后總結(jié)出這兩種比較靠譜的方法,只需要在需要跳轉(zhuǎn)的地方加上合適的id就行,原理和單頁(yè)面內(nèi)跳轉(zhuǎn)相似。
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}
方法一:新增路由地址來(lái)實(shí)現(xiàn)
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'); } }
方法二:在原路由地址不變的情況下,利用路由傳遞參數(shù)來(lái)實(shí)現(xiàn)
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 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- Angular 多級(jí)路由實(shí)現(xiàn)登錄頁(yè)面跳轉(zhuǎn)(小白教程)
- Angular4.x通過(guò)路由守衛(wèi)進(jìn)行路由重定向?qū)崿F(xiàn)根據(jù)條件跳轉(zhuǎn)到相應(yīng)的頁(yè)面(推薦)
- AngularJS實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)后自動(dòng)彈出對(duì)話框?qū)嵗a
- AngularJS頁(yè)面帶參跳轉(zhuǎn)及參數(shù)解析操作示例
- AngularJS實(shí)現(xiàn)單一頁(yè)面內(nèi)設(shè)置跳轉(zhuǎn)路由的方法
- angular同一頁(yè)面跳轉(zhuǎn)重新執(zhí)行的實(shí)現(xiàn)方法
相關(guān)文章
angularjs的select使用及默認(rèn)選中設(shè)置
本篇文章主要介紹了angularjs的select使用及默認(rèn)選中設(shè)置,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-04-04AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例
下面小編就為大家分享一篇AngularJS動(dòng)態(tài)添加數(shù)據(jù)并刪除的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02AngularJS入門(mén)教程之與服務(wù)器(Ajax)交互操作示例【附完整demo源碼下載】
這篇文章主要介紹了AngularJS與服務(wù)器Ajax交互操作的方法,可實(shí)現(xiàn)post傳輸數(shù)據(jù)的功能,并附帶完整的demo源碼供讀者下載參考,源碼中還包含了前面章節(jié)的示例文件,需要的朋友可以參考下2016-11-11AngularJS變量及過(guò)濾器Filter用法分析
這篇文章主要介紹了AngularJS變量及過(guò)濾器Filter用法,結(jié)合實(shí)例形式分析了AngularJS變量、過(guò)濾器及自定義過(guò)濾器的相關(guān)用法與注意事項(xiàng),需要的朋友可以參考下2016-11-11詳解AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn)
本篇文章主要介紹了AngularJs HTTP響應(yīng)攔截器實(shí)現(xiàn)登陸、權(quán)限校驗(yàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-04-04