亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

 更新時(shí)間:2018年08月31日 14:27:40   作者:Tvibe  
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁(yè)面的指定位置方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

之前做過(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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論