Angular4 - アンカーへのスクロール

Question

同じページのアンカー要素への単純なスクロールをしようとしています。基本的に、人は「試してみてください」ボタンをクリックし、それはidの「ログイン」のページの下の領域にスクロールします。現在、基本的にはid="login" & <a href="#login"></a>ですが、そのセクションにジャンプしています。理想的には、私はそれをスクロールしたいと思います。 Angular4を使用している場合、これを行うための方法がいくつか組み込まれているのか、それとも最も簡単な方法はありますか？ありがとう！

全体のテンプレート...（まだ空のコンポーネントは）アンギュラ4で

<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

あなたは、同じページにアンカーを使用して、いくつかの問題を持つことができます。

は、私はあなたのHTMLコンポーネントで、あなたのapp.module.tsに

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

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

テストを

npm install ng2-page-scroll --save 

インポートをインストールし、このよう

ng2-page-scroll

を使用して解決

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

Answer 2

私はそれがより簡単な解決策だと思う：あなたのHTMLで

：あなたのtypescriptですで

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

：

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

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