快捷導(dǎo)航

Angular 利用路由跳轉(zhuǎn)到指定頁面的指定位置方法

更新時間：2018年08月31日 14:27:40 作者：Tvibe

今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁面的指定位置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

之前做過頁面內(nèi)的跳轉(zhuǎn)，比較簡單，最近項目需要實現(xiàn)跨頁面跳轉(zhuǎn)，并跳轉(zhuǎn)到指定地點，試了很多方法，有用到傳遞參數(shù)然后讓頁面滾動相應(yīng)的距離，但是一旦文章長短發(fā)生變化，滾動的距離也需要重新計算，比較麻煩，所以最后總結(jié)出這兩種比較靠譜的方法，只需要在需要跳轉(zhuǎn)的地方加上合適的id就行，原理和單頁面內(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}

方法一：新增路由地址來實現(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ù)來實現(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)到指定頁面的指定位置方法就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: