使用 Angular 单击时滚动到组件

Question

嘿，我

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

这把小提琴描述了我正在寻找的结果：

$(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"的元素，该元素是您的组件。