Angular 2 entspricht einem href = "# someElementId"

Question

Ich verwende:

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

weil Router und a href = "# über" nachgeladen meiner Seite, wenn ich nicht auf meinem root/Seite war. Mit dieser Funktion auf der Navigationsschaltfläche navigiert es mit einem Klick zu/#, ohne die Seite neu zu laden, aber das Problem ist, dass es nicht wie bei einem href = "# about" zu diesem div springt, wenn ich von ihm weggescrollt werde auf der Seite. Gibt es eine Möglichkeit, dies in eckigen zu erreichen?

Answer 1

Für alle Interessierten, geht meine Lösung wie folgt:

meine navbar eine Schaltfläche 'über' hat die (Klick) = "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

Dies scheint ein wenig hacky, aber es funktioniert:

In Ihrer Komponente

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

In der Vorlage:

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

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

bearbeiten: Wie @JB Nizet in angegeben ist Kommentar Sie können auch versuchen:

<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