角 6 |路由器链接答案

【问题标题】：Angular 6 | RouterLink角 6 |路由器链接
【发布时间】：2019-01-22 11:05:00
【问题描述】：

有什么方法可以转到另一个页面的由 id 定义的部分而无需重新加载

【问题讨论】：

您好，欢迎来到 stackoverflow，这不是编码服务。要阅读如何提问，请阅读How to Ask，并相应地编辑您的问题，谢谢

标签： angular typescript router-outlet

【解决方案1】：

Angular v6.1 中添加了许多新的滚动功能。

这是一篇关于它的博客文章的引述：

Router Scroller 提供与滚动到角路由器。使用 Router Scroller，您可以执行以下操作。

浏览器返回时恢复到过渡前的滚动位置像 #foo 这样的分段 URL 并自动滚动到元素对应ID

我假设您要问的是第二段（锚滚动）？

如果是这样，您可以在这里找到更多信息：

https://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

还有

https://blog.ninja-squad.com/2018/07/26/what-is-new-angular-6.1/

【讨论】：

【解决方案2】：

你可以使用 scrollIntoView 方法

致谢：ibenjelloun

例如：https://stackblitz.com/edit/angular-scroll-spy-routing

@HostListener('scroll', ['$event'])
onScroll(event: any) {
    let currentSection: string;
    const children = this._el.nativeElement.children;
    const scrollTop = event.target.scrollTop;
    const parentOffset = event.target.offsetTop;
    for (let i = 0; i < children.length; i++) {
        const element = children[i];
        if (this.spiedTags.some(spiedTag => spiedTag === element.tagName)) {
            if ((element.offsetTop - parentOffset) <= scrollTop) {
                currentSection = element.id;
            }
        }
    }
    if (currentSection !== this.currentSection) {
        this.currentSection = currentSection;
        this.sectionChange.emit(this.currentSection);
    }
}

【讨论】：