2016-07-13 20 views
0

Ich folgte den Winkel 2 Tutorials: Routing und Navigation - Abfrageparameter https://angular.io/docs/ts/latest/guide/router.html#!#query-parametersWinkel 2 scrollTo Verhalten

die Idee ist, aus einer Liste zu einer neuen Route bohren nach unten und dann auf der Liste auf den gleichen Punkt wieder zurück.

Es funktioniert gut für sie, weil die Liste sehr kurz ist ohne scroll.

Ich habe das gleiche Szenario, aber mit einer langen Liste. nachdem ich zum Listenbildschirm zurückgekehrt bin, lade und binde ich die Liste und ich muss den Scroll zum aktuellen Element setzen (was nicht immer sichtbar ist). I versucht:

ngAfterViewChecked() { 
     if(this.selectedId) 
      this.el.nativeElement.querySelector("[id='7']").scrollIntoView(); 
    } 

(7 schwer Einfachheit codiert) a es tatsächlich versucht, auf jedem Haken und jedesmal, wenn die Abfrage Selektor null zurückgibt. (auf der Browser-Konsole nach der Seite zu laden, funktioniert diese Linie fein: ...querySelector("[id='7']").scrollIntoView();)

ich aus Ideen bin, können Sie an etwas anderes denken Scrollen zu erreichen, nachdem die Liste Bindung

hier eckig Live exmple?: http://plnkr.co/edit/?p=preview wenn Sie das Fenster schrumpfen (um Bildlaufleiste) und klicken Sie auf den letzten Held (Rubberman) Sie werden sehen, was ich meine Dank

Antwort

2

ich eine Lösung/Abhilfe gefunden:.

ngAfterViewChecked() { 
    let timer = Observable.timer(0); 
    timer.subscribe(t => { 
     if (this.selectedId) 
      this.el.nativeElement.querySelector("[id='" + this.selectedId + "']").scrollIntoView(); 
    }); 

es scheint, dass ein Timer mit Nullverzögerung das Problem beheben