Autoscroll in Angular 2

Ich hab ein Problem mit Winkel 2, in dem der Wechsel von einer route zur anderen nicht automatisch Blättern Sie zu der Spitze der neuen Ansicht. Ich merke, dass Winkel-1 erlaubte eine autoscroll Eigenschaft Hinzugefügt werden, um ein HTML-element, und andere hatten sich mit einigen einfachen javascript (wie window.scroll(0, 0)) zu zwingen, Ansichten, Blättern Sie zu der Spitze, wenn es geladen wird.

Allerdings bin ich mir nicht sicher, wie dies zu erreichen mit Winkel-2. Weiß jemand, wie das zu erreichen ist?

InformationsquelleAutor der Frage Chris Ryan | 2016-03-24

update

Derzeit gibt es keine automatische Möglichkeit.

Siehe auch Winkel 2 Typoskript-Fehler bei Verwendung der subscribe-Funktion auf neuen router (rc 1)

Siehe auch https://github.com/angular/angular/issues/6595#issuecomment-244232725

class MyAppComponent {
  constructor(router: Router) {
    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          //you can use DomAdapter
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(element); }
        }
      }
    });
  }
}

update

In den neuen router V3-beta.2 können Sie ein fragment mit dem router verbindet und router navigation

<a [routerLink]="..." fragment="top">

es scrollen soll, sondern fügt auch #top auf die URL (selber noch nicht getestet)

Update

Original

Es ist eine offene Frage, die für diese https://github.com/angular/angular/issues/6595

Einen workaround (erwähnt in https://github.com/angular/angular/issues/6946)

Spritzen Sie den router, abonnieren route ändert sich und ruft nach oben:

>= RC.x

router.changes.subscribe() => {
  window.scrollTo(0, 0);
});

beta

router.events
.filter(e => e instanceof NavigationEnd)
.subscribe(() => {
  window.scrollTo(0, 0);
});

InformationsquelleAutor der Antwort Günter Zöchbauer

Hat können Sie hier sehen: https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#Veranstaltungen-Anker haben, müssen Sie auf "router.Veranstaltungen.abonnieren" - da Eckig 2.0.0

Also eine gute Lösung, um automatisch scrollen kannst, um die oben in der Seite ist eine AppComponent wie diese:

import {Component} from '@angular/core';
import {Router, NavigationEnd} from "@angular/router";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private router: Router) {
        router.events.subscribe((val) => {
            if (val instanceof NavigationEnd){
                window.scrollTo(0,0);
            }
        });
    }
}

InformationsquelleAutor der Antwort Thierry

9

Neuere RCs (>= RC.3) scheinen nicht zu entlarven eine changes Beobachten, ist es wahrscheinlich, seitdem umbenannt in Veranstaltungen oder routerEvents.

Ihre absolut "fantastisch" docs nicht scheinen, um alle Informationen auf, was macht was, also ich denke, du bist in für ein wenig Russisch-Roulette gibt. Oder eine Münze werfen oder sowas.

Vom diese Antwort, es scheint, die events Beobachtbaren Renditen Ereignisse in Bezug auf die navigation Zustand:
```
router.events.subscribe(event:Event => {
    if(event is NavigationStart) {
    }
    //NavigationEnd
    //NavigationCancel
    //NavigationError
    //RoutesRecognized   
  }
```
InformationsquelleAutor der Antwort the_critic
4

Ich hatte das gleiche Problem. Basierend auf Gunter ' s Antwort fand ich, dass die Winkel s 2 RC.1 neuen router nicht aussetzen, eine Beobachtbare direkt. Stattdessen hat er eine changes - Eigenschaft für diesen Zweck. Die Problemumgehung für RC.1:
```
this._router.changes.subscribe(() => {
    window.scrollTo(0, 0);
}); 
```
InformationsquelleAutor der Antwort Federico Rodriguez
4

Habe ich verwendet, wenn(dies.router.navigiert) in der ngOnInit auf jeder Seite, um festzustellen, ob oder nicht zu verwenden-Fenster.scrollTo(0, 0). Diese decken die meisten Fälle, die das routing zu der Seite während dem scroll-position, wo es sein sollte, wenn Sie klicken Sie auf die Zurück-Schaltfläche Ihres Browsers.
```
if(this.router.navigated) {
  window.scrollTo(0, 0);
}
```
InformationsquelleAutor der Antwort Shane

100% - Lösung getestet von mir:

constructor(router:Router){
    router.events.subscribe(() => {
        window.scrollTo(0, 0);

    }

InformationsquelleAutor der Antwort RohanArihant

Ich dies geschrieben, in der Problem threadaber ich poste es nochmal hier.

Mein team wurde mit was das Winkel-team nutzt auf dieser repo auf eckig.io. Machen Sie einfach eine service-und Spritzen Sie es wie gewohnt. Dann, auf ngAfterViewInit auf jeder Seite, die Sie wollen dieses Verhalten, einfach anrufen.[scroll service-variable-name].scrollToTop(). Schließlich müssen Sie fügen Sie diese an die oben <body> im index.html: <div id="top-of-page"></div>

Service-Code:

import { Injectable, Inject } from '@angular/core';
import { PlatformLocation } from '@angular/common';
import { DOCUMENT } from '@angular/platform-browser';
import {fromEvent} from 'rxjs/observable/fromEvent';

export const topMargin = 16;
/**
 * A service that scrolls document elements into view
 */
@Injectable()
export class ScrollService {

  private _topOffset: number | null;
  private _topOfPageElement: Element;

  //Offset from the top of the document to bottom of any static elements
  //at the top (e.g. toolbar) + some margin
  get topOffset() {
    if (!this._topOffset) {
      const toolbar = this.document.querySelector('md-toolbar.app-toolbar');
      this._topOffset = (toolbar && toolbar.clientHeight || 0) + topMargin;
    }
    return this._topOffset;
  }

  get topOfPageElement() {
    if (!this._topOfPageElement) {
      this._topOfPageElement = this.document.getElementById('top-of-page') || this.document.body;
    }
    return this._topOfPageElement;
  }

  constructor(
      @Inject(DOCUMENT) private document: any,
      private location: PlatformLocation) {
    //On resize, the toolbar might change height, so "invalidate" the top offset.
    fromEvent(window, 'resize').subscribe(() => this._topOffset = null);
  }

  /**
   * Scroll to the element with id extracted from the current location hash fragment.
   * Scroll to top if no hash.
   * Don't scroll if hash not found.
   */
  scroll() {
    const hash = this.getCurrentHash();
    const element: HTMLElement = hash
        ? this.document.getElementById(hash)
        : this.topOfPageElement;
    this.scrollToElement(element);
  }

  /**
   * Scroll to the element.
   * Don't scroll if no element.
   */
  scrollToElement(element: Element) {
    if (element) {
      element.scrollIntoView();

      if (window && window.scrollBy) {
        //Scroll as much as necessary to align the top of `element` at `topOffset`.
        //(Usually, `.top` will be 0, except for cases where the element cannot be scrolled all the
        // way to the top, because the viewport is larger than the height of the content after the
        // element.)
        window.scrollBy(0, element.getBoundingClientRect().top - this.topOffset);

        //If we are very close to the top (<20px), then scroll all the way up.
        //(This can happen if `element` is at the top of the page, but has a small top-margin.)
        if (window.pageYOffset < 20) {
          window.scrollBy(0, -window.pageYOffset);
        }
      }
    }
  }

  /** Scroll to the top of the document. */
  scrollToTop() {
    this.scrollToElement(this.topOfPageElement);
  }

  /**
   * Return the hash fragment from the `PlatformLocation`, minus the leading `#`.
   */
  private getCurrentHash() {
    return this.location.hash.replace(/^#/, '');
  }
}

InformationsquelleAutor der Antwort dockleryxk

1

Für Diejenigen von Euch, die finden window.scrollTo(0,0) nicht funktioniert (ich vermute wegen material-design sidenav aber Total raten) verwenden Sie die Methode finden Sie hier:
Javascript - /CSS-Fenster.scrollTo(0,0) funktioniert nicht

InformationsquelleAutor der Antwort Helzgate

Ich bin mit material, sidenav, und ich konnte nicht Holen Sie sich eine der vorgeschlagenen Antworten für mich zu arbeiten. Hier ist meine funktionierende Lösung:

import { Router, NavigationEnd } from '@angular/router';

...

constructor(
  private router: Router,
) {
  router.events.subscribe(event => {
    if (event instanceof NavigationEnd) {
      document.querySelector('.mat-sidenav-content').scrollTop = 0;
    }
  }
}

InformationsquelleAutor der Antwort Tyson

1

Anstelle des Schreibens von code in jeder Komponente, ich habe den folgenden code in einem Ort -
```
<router-outlet (activate)="onActivate($event)"></router-outlet>

    onActivate(e) {
        window.scrollTo(0, 0);
    }
```
InformationsquelleAutor der Antwort Kanchan

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.