html - Angular4 - 滚动到 anchor

Question

我正在尝试对同一页面上的 anchor 元素进行简单滚动。基本上，此人单击“尝试”按钮，它会滚动到页面下方 ID 为“登录”的区域。现在，它正在使用基本的 id="login" & <a href="#login"></a>但它正在跳转到该部分。理想情况下，我希望它滚动到那里。如果我使用的是 Angular4，是否有一些内置的方法可以做到这一点，或者最简单的方法是什么？谢谢!

整个模板...(组件仍然是空的)

<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

对于 Angular 6+，您可以使用:

1. 在您的路由模块中:

    imports: [RouterModule.forRoot(routes, { anchorScrolling: 'enabled'})]
   

2. 然后在你的组件 html 中

    <a (click)="onClick('AnchorId')">Click me!</a>
    <a (click)="onClick('OtherAnchorId')">Click me, too!</a>
    ...
    <div id="AnchorId">...</div>
    ...
    <div id="OtherAnchorId">...</div>
   

3. 然后在你的组件中 ts

   import { ViewportScroller } from '@angular/common';
   
   @Component({
       selector: 'component-selector',
       templateUrl: './mycomponent.component.html'
   })
   export class MyComponent {
     constructor(private viewportScroller: ViewportScroller) {}
   
     public onClick(elementId: string): void { 
         this.viewportScroller.scrollToAnchor(elementId);
     }
   }