Pytanie Przewiń do kotwicy nie działa


Próba przewinięcia do łącza zakotwiczenia przy użyciu następującej składni.

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

A węzeł zakotwiczenia wygląda tak

<div id="test">

Po kliknięciu pasek adresu przeglądarki pokazuje fragment #testu, ale automatyczne przewijanie nie występuje. Masz pomysł, dlaczego się nie przewija?


14
2017-10-09 08:43


pochodzenie




Odpowiedzi:


Oparte na @vsavkin obejście i wykorzystanie tego, że fragmenty są dostarczane jako obserwowalne (przy użyciu "@angular/core": "^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()
    })
  }
}

17
2018-01-11 15:07





Przypuszczam, że przewijanie nie jest jeszcze realizowane za pomocą kątowego 2. Moje rozwiązanie podobnego problemu (przewijanie do zakotwiczenia na tej samej stronie) miało posłużyć ng2-page-scroll.


3
2017-10-12 20:50





Zobacz w nowej 6 funkcji Angular ViewportScroller

https://angular.io/api/common/ViewportScroller


2
2017-08-13 14:12





Mogę zasugerować użytkownikowi ng2-page-scroll

ng2-page-scroll

zainstalować

npm install ng2-page-scroll --save

importuj w swoim app.module.ts

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

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

przetestuj go w swoim komponencie html

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

1
2017-10-05 13:52





Lubiłem to używać

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

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

następnie w HTML coś takiego

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

0
2018-04-06 22:58