Angular4 - Scrollen zum Anker

Question

Ich versuche, ein einfaches Scroll zu einem Ankerelement auf der gleichen Seite zu tun. Grundsätzlich klickt die Person auf einen "Try It" -Knopf und scrollt zu einem Bereich auf der Seite mit der ID "login". Gerade jetzt, es arbeitet mit einem grundlegenden id="login" & <a href="#login"></a> aber es springt zu diesem Abschnitt. Im Idealfall möchte ich, dass es dort scrollt. Wenn ich Angular4 benutze, gibt es eine eingebaute Möglichkeit dies zu tun oder was ist der einfachste Weg? Vielen Dank!

Ganze Vorlage ... (Komponente noch leer)

<div id="image-header"> 
    <div id="intro"> 
     <h1 class="text-center">Welcome to ThinkPlan</h1> 
     <h3 class="text-center">Planning your way</h3> 
     <a class="btn btn-outline-primary" href="#login" id="view">Try It</a> <!-- Where the user clicks to scroll --> 
    </div> 
</div> 
<div class="container" id="info"> 
    <div class="row"> 
     <div class="col-md-12"> 
      <div class="space" id="login"></div> <!-- The place to scroll to --> 
       <h1 class="text-center">ThinkPlan</h1> 
       <form class="form-horizontal"> 
        <fieldset> 
         <legend>Login</legend> 
         <div class="form-group"> 
          <label for="inputEmail" class="col-lg-2 control-label">Email</label> 
          <div class="col-lg-10"> 
           <input type="text" class="form-control" id="inputEmail" placeholder="Email"> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label for="inputPassword" class="col-lg-2 control-label">Password</label> 
          <div class="col-lg-10"> 
           <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
          </div> 
         </div> 
         <div class="form-group" id="log-btn"> 
          <div class="col-lg-10 col-lg-offset-2"> 
           <button routerLink="/plan" type="submit" class="btn btn-outline-primary">Login</button> 
          </div> 
         </div> 
         <p class="lead text-center">New here? <a routerLink="signup">Sign up.</a></p> 
        </fieldset> 
       </form> 
     </div> 
    </div> 
</div> 

Answer 1

mit kantigem 4 können Sie ein Problem mit Anker auf der gleichen Seite haben.

gelöst I

ng2-page-scroll

installieren

npm install ng2-page-scroll --save 

Import in Ihrem app.module.ts

import {Ng2PageScrollModule} from 'ng2-page-scroll'; 

@NgModule({ 
    imports: [ 
     /* Other imports here */ 
     Ng2PageScrollModule 
     ] 
}) 
export class AppModule { 
} 

Test in Ihre HTML-Komponente auf diese Weise mit

<a pageScroll href="#test">Testing</a> 
<div id="test"> 

Answer 2

Ich denke, es einfachere Lösung ist:

In Ihrem HTML:

<a [routerLink]="['/']" fragment="login"></a> 

In Ihrem Typoskript:

ngOnInit() { 
this.route.fragment.subscribe(fragment => { this.fragment = fragment; }); 
} 

ngAfterViewChecked(): void { 
    try { 
     if(this.fragment) { 
      document.querySelector('#' + this.fragment).scrollIntoView(); 
     } 
    } catch (e) { } 
}