之前做過頁面內的跳轉，比較簡單，最近項目需要實現跨頁面跳轉，并跳轉到指定地點，試了很多方法，有用到傳遞參數然后讓頁面滾動相應的距離，但是一旦文章長短發生變化，滾動的距離也需要重新計算，比較麻煩，所以最后總結出這兩種比較靠譜的方法，只需要在需要跳轉的地方加上合適的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.tsthis.myActivatedRoute.params.subscribe(  (data: any) => {  if (data.id === 'readMore') {   window.location.assign('detail#readMore');  }  } );

以上這篇Angular 利用路由跳轉到指定頁面的指定位置方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持錯新站長站。