Прокрутка до привязки не работает

Question

Пробуждение до ссылки привязки с использованием следующего синтаксиса.

<a [routerLink]="['./']" fragment="test">Testing</a> 

И узел привязки выглядит следующим образом

<div id="test"> 

При нажатии адреса браузера бар показывает #test фрагмента, но автоматическая прокрутка не происходит. Любая идея, почему она не прокручивается?

Answer 1

Я предполагаю, что прокрутка еще не выполнена с угловыми 2. Мое решение аналогичной проблемы (прокрутка на якорь на той же странице) заключалось в использовании ng2-page-scroll.

Answer 2

на основе @vsavkin обходной путь, и принимая преимущество, что фрагменты предоставляются в качестве наблюдаемой (с использованием "@ угловом/ядра": "^ 2.3.1"):

class MyAppComponent implements OnInit{ 

    constructor(private route: ActivatedRoute) { } 

    ngOnInit() { 
    this.route.fragment.subscribe(f => { 
     const element = document.querySelector("#" + f) 
     if (element) element.scrollIntoView(element) 
    }) 
    } 
} 

Answer 3

Я любил использовать это

scroll(container, target) { 
    let scrollTo = target.getBoundingClientRect().top; 

    $(container).animate({ 
     scrollTop: `+=${scrollTo}` 
    }, 900); 
} 

затем в HTML сделать что-то вроде

<div #container> <!-- Scrolling container --> 
    <button (click)="scroll(container, intro)">Go To Intro</button> 
    <!-- other content --> 
    <div #intro></div> 
</div> 

Answer 4

Я могу предложить пользователю NG2-страницы прокрутки

ng2-page-scroll

установки

npm install ng2-page-scroll --save 

импорт в вашей app.module.ts

import {Ng2PageScrollModule} from 'ng2-page-scroll'; 

@NgModule({ 
    imports: [ 
     /* Other imports here */ 
     Ng2PageScrollModule 
     ] 
}) 
export class AppModule { 
} 

протестируйте в HTML компонент

<a pageScroll href="#test">Testing</a> 
<div id="test">