Angular2 Hashtag routing zu Verankern, nicht bewegen-Seite

So habe ich den folgenden Beitrag, um herauszufinden, wie man ein fragment an die url an.

Angular2 Routing mit Hashtag Sie auf Seite Anker

Und das fragment Hinzugefügt wird in Ordnung, allerdings die Seite nicht verschieben, um die resultierende Anker. Ich habe versucht, mit sowohl die name und id Attribut auf das Ziel div, aber keiner scheint zu funktionieren.

Ich bin mit der Eckigen Version 2.0.0-rc.3 und die router-version 3.0.0-alpha.6.

Dank!

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

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

Es ist genug Platz zwischen den 2 Elementen zu sagen, ob die Seite tatsächlich bewegt.

Und wie gesagt, ist die url korrekt fügt #destination zu sich selbst.

Bitte fügen Sie den code, zeigen, was Sie versucht haben. Ein Plunker zu reproduzieren, wäre hilfreich.
Ich fügte hinzu, die aktuelle Methode, die ich versuche, aber ich habe auch versucht, die änderung in einer Funktion über die this._router.navigate( ['/somepath', id ], {fragment: 'test'}); Beispiel aus dem verlinkten post.
Können Sie bitte versuchen Sie es mit einem tatsächlichen route Weg, wie <a [routerLink]="['../currentroute']" fragment="destination">Go TO DIV</a>
Die aktuelle route ist /docs, also versuchte ich <a [routerLink]="['../docs']" fragment="destination">Go TO DIV</a>, die noch produziert die richtige url. Aber es immer noch nicht bewegen.
Sorry, keine Ideen.

InformationsquelleAutor jipson | 2016-08-10

14

Einer Problemumgehung möglicherweise eine Funktion schreiben, die in der Komponente, dass legt den Ort.hash-id der div, die Sie navigieren möchten.
```
<a (click)="goTo('destination')">Go TO DIV</a>

<div id='destination'>
    <h2>Destination</h2>
</div>
```
Dann in der Komponente:
```
goTo(location: string): void {
    window.location.hash = location;
}
```
Ich möchte hinzufügen, eine Notiz. Es setzt hash nur einmal, also wenn die hash-Funktion ist bereits enthalten in der Seite und klicken Sie auf den gleichen Anker-link, wird es nicht, Blättern Sie zum Ziel. Aber es funktioniert, wenn Sie klar den Hashwert vor der Einstellung -> window.location.hash = ''; window.location.hash = location;
Ich habe versucht, es funktioniert, aber dann ist alles über dem Ziel verschwindet.
Weit weniger kompliziert als mit dem router. Ich verstehe, warum das ist kompliziert, weil der routing-und alle, die SPA-Sachen, aber die Anker-links sind so ein basic feature.

InformationsquelleAutor JohnMAC

Dieser arbeitete für mich:

Zuerst bereiten Sie MyAppComponent für automatisches scrollen in ngAfterViewChecked()...

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 senden prodID hashtag

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 } );
  }

}

InformationsquelleAutor JavierFuentes

2

Diese Problemumgehung sollte den trick tun
```
<div [routerLink]="[]" fragment="destination">
  <a href="#destination">Go TO DIV</a>
</div>
```
Danke, Nein TypeScript/JavaScript erforderlich!. Dieses Zeug sollte nicht so schwer sein. Fühlen Sie sich wie das Rad neu erfunden, manchmal.
Es generiert keine korrekten url auf einem beliebigen anderen Pfad als root.

InformationsquelleAutor Martin Cremer
2

Hier eine sehr einfache Lösung, die für mich gearbeitet:

In der Komponente, fügen Sie die folgende Methode:
```
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();
  });
}
```
Und in der Ansicht, die <a> - tag wird wie folgt Aussehen:
```
<a (click)="navigateTo('#destination')">Destination</a>
```
Derzeit mit Winkel 4 / CLI. Dies war die BESTE Lösung. Danke!!! Auch, am einfachsten mit möglichst wenig code, der tatsächlich funktioniert hat.

InformationsquelleAutor Soma Mbadiwe

Nachdem ich all die Lösungen hier, habe ich beschlossen zu gehen mit einem kleinen und einfachen 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(); }
}

War die Idee, etwas zu schaffen, das flexible, das angebracht werden könnte, um jedes element auf der Seite.

Verwendung:

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

Und vergessen Sie nicht, zu erklären, dass die Richtlinie auf einem der Module:

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

InformationsquelleAutor rafaelbiten

1

Du kannst auch dieses plugin verwenden https://www.npmjs.com/package/ng2-page-scroll
Es hat einen animierten scrollen Sie zu einem bestimmten Anker.

Danke, Art, sir.

InformationsquelleAutor Well-Made
0

Ich gefunden habe, sehr nützlich plugin finden Sie im nmp - ngx-scroll-zu, die funktioniert gut für mich. Aber es ist entworfen, für Eckige 4+, aber vielleicht wird jemand finden, der diese Antwort hilfreich.

InformationsquelleAutor mpro

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.