角 6 | 路由器链接

Question

有什么方法可以在不重新加载的情况下转到由 id 定义的另一个页面的部分

Answer 1

There were a bunch of new scrolling features added in Angular v6.1.

Here is a quote from a blog post about it:

The Router Scroller provides functions related to scrolling to the Angular Router. With Router Scroller, you can do the following things.

Restore to scroll position before transition when browser back Fragmented URL like #foo and automatically scroll to elements with corresponding ID

I assume the second paragraph (anchor scrolling) is what you are asking about?

If so, you can find out more here:

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

And

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

Answer 2

You can do using scrollIntoView method

Credits goes to:ibenjelloun

Example: 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);
    }
}