web-dev-qa-db-de.com

Angular2 Hashtag Routing an Anchor verschiebt die Seite nicht

Also habe ich den folgenden Beitrag verwendet, um herauszufinden, wie man ein Fragment zur URL hinzufügt.

Angular2 Routing mit Hashtag zum Seitenanker

Und das Fragment wird gut hinzugefügt, aber die Seite wird nicht zum resultierenden Anker verschoben. Ich habe versucht, das name- und das id-Attribut für das Ziel div zu verwenden, aber beide scheinen nicht zu funktionieren.

Ich verwende Angular Version 2.0.0-rc.3 und Router-Version 3.0.0-alpha.6.

Vielen Dank!

<a [routerLink]="[]" fragment="destination">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

Zwischen den beiden Elementen ist genügend Platz, um festzustellen, ob sich die Seite tatsächlich bewegt.

Und wie bereits erwähnt, fügt die URL #destination korrekt zu sich selbst hinzu.

11
jipson

Eine Problemumgehung könnte darin bestehen, eine Funktion in Ihre Komponente zu schreiben, die location.hash auf die ID des Div setzt, zu dem Sie navigieren möchten.

<a (click)="goTo('destination')">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>

Dann in Ihrer Komponente:

goTo(location: string): void {
    window.location.hash = location;
}
14
JohnMAC

Das hat für mich funktioniert:

Bereiten Sie zuerst MyAppComponent für das automatische Scrollen in ngAfterViewChecked () ... vor.

import { Component, OnInit, AfterViewChecked } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';

@Component( {
   [...]
} )
export class MyAppComponent implements OnInit, AfterViewChecked {

  private scrollExecuted: boolean = false;

  constructor( private activatedRoute: ActivatedRoute ) {}

  ngAfterViewChecked() {

    if ( !this.scrollExecuted ) {
      let routeFragmentSubscription: Subscription;

      // Automatic scroll
      routeFragmentSubscription =
        this.activatedRoute.fragment
          .subscribe( fragment => {
            if ( fragment ) {
              let element = document.getElementById( fragment );
              if ( element ) {
                element.scrollIntoView();

                this.scrollExecuted = true;

                // Free resources
                setTimeout(
                  () => {
                    console.log( 'routeFragmentSubscription unsubscribe' );
                    routeFragmentSubscription.unsubscribe();
                }, 1000 );
              }
            }
          } );
    }

  }

}

Navigieren Sie dann zu my-app-route, um prodID-Hashtag zu senden

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

@Component( {
   [...]
} )
export class MyOtherComponent {

  constructor( private router: Router ) {}

  gotoHashtag( prodID: string ) {
    this.router.navigate( [ '/my-app-route' ], { fragment: prodID } );
  }

}
2
JavierFuentes

Nachdem ich alle Lösungen hier gesehen hatte, entschied ich mich für eine kleine und einfache Richtlinie. Hier ist was ich endete mit:

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({ selector: '[appAnchorTo]' })
export class AnchorToDirective {
  @Input() target: string;

  constructor(el: ElementRef) { el.nativeElement.style.cursor = 'pointer'; }

  @HostListener('click', ['$event'])
  onClick() { document.querySelector(this.target).scrollIntoView(); }
}

Die Idee war, etwas Flexibles zu schaffen, das an jedes Element der Seite angehängt werden kann.

Verwendungszweck:

<a appAnchorTo target="#my-link">My Insights</a>
<div appAnchorTo target="#my-other-link">My Customers</div>

Und vergessen Sie nicht, die Direktive auf einem Ihrer Module zu deklarieren:

@NgModule({
    ...,
    declarations: [
        ...,
        AnchorToDirective,
    ]
})
2
rafaelbiten

Diese Problemumgehung sollte den Trick tun

<div [routerLink]="[]" fragment="destination">
  <a href="#destination">Go TO DIV</a>
</div>
2
Martin Cremer

Hier ist eine sehr einfache Lösung, die für mich funktioniert hat:

Fügen Sie in der Komponente diese Methode hinzu:

navigateTo(location: string): void {
// location will be a valid CSS ID selector; i.e. it should be preceded with '#'
window.location.hash = location;
setTimeout(() => {
    document.querySelector(location).parentElement.scrollIntoView();
  });
}

In der Ansicht sieht das <a>-Tag folgendermaßen aus:

<a (click)="navigateTo('#destination')">Destination</a>
2
Soma Mbadiwe

Sie können auch dieses Plugin https://www.npmjs.com/package/ng2-page-scroll .__ verwenden. Es führt einen animierten Bildlauf zu einem bestimmten Anker durch.

1
Well-Made

Ich habe ein sehr nützliches Plugin in nmp - ngx-scroll-to gefunden, das für mich großartig ist. Es ist jedoch für Angular 4+ ausgelegt, aber vielleicht wird diese Antwort für jemanden hilfreich sein.

0
mpro