使用 Angular 滚动到一个组件

【问题标题】：scroll to a component on a click using Angular使用 Angular 滚动到一个组件
【发布时间】：2017-12-31 18:01:41
【问题描述】：

嘿，我正在尝试创建一个带有几个链接按钮的简单导航栏。我希望当我点击一个按钮时，它会滚动到正确的组件。我知道我可以使用 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/

【问题讨论】：

你想如何滚动到不在 HTML 中的元素？或者你的意思是一个 HTML 文件？组件是否在 DOM 中？
好吧，我认为我必须使用 @Output() 和 @Input() 装饰器才能使其正常工作......你的问题让我意识到:)

标签： jquery angular scroll scrollto

【解决方案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”的元素，这是您的组件。

【讨论】：

它确实有效。我有什么办法给它添加动画吗？