Angular4 - 滚动到锚点

Question

我正在尝试简单滚动到同一页面上的锚元素。基本上，此人单击“尝试”按钮，它会滚动到页面下方 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>

原文由 lnamba 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

对于 Angular 6+，你可以使用：

1. 在您的路由模块中：

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

1. 然后在你的组件 html 中

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

1. 然后在你的组件 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);
     }
   }

原文由 0lukasz0 发布，翻译遵循 CC BY-SA 4.0 许可协议