は角度のhrefに相当2 =

Question

私が使用しています「＃はsomeElementId」：

gotoAbout() { 
    this.router.navigate(['/'], { fragment: 'about' }) 
} 

ためrouterLinkとのhref =「について＃」私は私のルート/ページ上ではなかった場合、私のページにリロード。ナビゲーションボタン上でこの機能を使用すると、ページをリロードせずにワンクリックで/＃にナビゲートすることができますが、問題はそれがスクロールされたときにhref = "＃about"のようにジャンプすることではありませんページ上にこれを角度で達成する方法はありますか？

Answer 1

次のように、私の解決策は行く：

私のナビゲーションバーには、（クリック）し '約' ボタンを持っている= "gotoAbout（）;" ：

gotoAbout() { 
    let tree = this.router.parseUrl(this.router.url); 
    if (tree.fragment == 'about') { 
     let element = document.querySelector("#" + tree.fragment); 
     if (element) { 
     element.scrollIntoView(element); 
     } 
    } 
    else { 
     this.router.navigate(['/'], {fragment: 'about'}) 
     .then(() => { 
      let tree = this.router.parseUrl(this.router.url); 
      let element = document.querySelector("#" + tree.fragment); 
      if (element) { 
      element.scrollIntoView(element); 
      } 
     }); 
    } 
    } 

Answer 2

これは少しハックようだが、それは動作します：あなたのコンポーネントで

テンプレートで

goToDiv(fragment: string): void { 
    window.location.hash = fragment; 
} 

：

<a (click)="goToDiv('destination')">Go to div</a> 

<div id='destination'> 
    <h2>Destination</h2> 
</div> 

編集：@JB Nizetがあるコメントで述べたように試してみることもできます：

<a [routerLink]="['/user/bob']" [queryParams]="{debug: true}" fragment="education"> 
    link to user component 
</a> 

興味がある人々のために

https://angular.io/docs/ts/latest/api/router/index/RouterLink-directive.html