使用 Angular 单击滚动到组件

Question

嘿，我正在尝试创建一个带有几个 link 按钮的简单导航栏。我希望当我点击一个按钮时，它会滚动到正确的组件。我知道我可以使用 jquery 使用 ScrollTo() 来做到这一点，但是使用 Angular 我没有在 1 页中包含所有 HTML。是否可以使其与 angular 一起使用？

这个 fiddle 描述了我正在寻找的结果：

$(document).ready(function() {
    $('a[rel="relativeanchor"]').click(function(){
        $('html, body').animate({
            scrollTop: $( $.attr(this, 'href') ).offset().top
        }, 500);
        return false;
    }); 
});

http://jsfiddle.net/francescov/4DcNH/

Answer 1

您可以使用 window.location.hash。像这样。

<button (click)="goTo('myComponent')"></button>

这是组件中的 goTo 函数：

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

那么这是您要导航到的组件：

<my-component id='myComponent'></my-component>

当您单击该按钮时，它将导航到 ID 为 "myComponent" 的元素，这是您的组件。

使用 Angular 单击滚动到组件

scroll to a component on a click using Angular

jquery

angular

scroll

scrollto