Angular2 Routing mit Hashtag zum Seitenanker

Ich möchte meiner Angular2-Seite einige Links hinzufügen, die beim Klicken zu bestimmten Positionen innerhalb dieser Seite springen , wie dies bei normalen Hashtags der Fall ist . Die Links wären also so etwas wie

/users/123#userInfo
/users/123#userPhoto
/users/123#userLikes

etc.

Ich glaube nicht, dass ich HashLocationStrategy brauche, da ich mit der normalen Angular2-Methode einverstanden bin, aber wenn ich direkt hinzufüge, würde der Link tatsächlich zum Stamm springen, nicht irgendwo auf derselben Seite. Jede Richtung wird geschätzt, danke.

Aktualisieren

Dies wird jetzt unterstützt

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

Fügen Sie Ihrer Komponente den folgenden Code hinzu, um einen Bildlauf durchzuführen

  import {ActivatedRoute} from '@angular/router'; // <-- do not forget to import

  private fragment: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.fragment.subscribe(fragment => { this.fragment = fragment; });
  }

  ngAfterViewInit(): void {
    try {
      document.querySelector('#' + this.fragment).scrollIntoView();
    } catch (e) { }
  }

Original

Dies ist ein bekanntes Problem, das unter https://github.com/angular/angular/issues/6595 nachverfolgt werden kann

Obwohl Günters Antwort richtig ist, deckt sie nicht den "Sprung zum" Anker-Tag-Teil ab .

Daher zusätzlich zu:

<a [routerLink]="['somepath']" fragment="Test">Jump to 'Test' anchor </a>

this._router.navigate( ['/somepath', id ], {fragment: 'test'});

... fügen Sie in der Komponente (übergeordnet), in der Sie ein "Sprung zu" -Verhalten benötigen, Folgendes hinzu:

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

class MyAppComponent {
  constructor(router: Router) {

    router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(true); }
        }
      }
    });

  }
}

Bitte beachten Sie, dass dies eine Problemumgehung ist ! Befolgen Sie dieses Github-Problem für zukünftige Updates. Dank an Victor Savkin für die Bereitstellung der Lösung!

Tut mir leid, dass ich etwas spät geantwortet habe. In der Angular Routing-Dokumentation gibt es eine vordefinierte Funktion, die uns beim Routing mit einem Hashtag zum Seitenanker hilft, dh anchorScrolling: 'enabled'

Schritt 1: - Importieren Sie zuerst das RouterModule in die Datei app.module.ts: -

imports:[ 
    BrowserModule, 
    FormsModule,
    RouterModule.forRoot(routes,{
      anchorScrolling: 'enabled'
    })
  ],

Schritt 2: - Gehen Sie zur HTML-Seite, erstellen Sie die Navigation und fügen Sie zwei wichtige Attribute wie [routerLink] und Fragment hinzu, um die jeweiligen Div-IDs abzugleichen : -

<ul>
    <li> <a [routerLink] = "['/']"  fragment="home"> Home </a></li>
    <li> <a [routerLink] = "['/']"  fragment="about"> About Us </a></li>
  <li> <a [routerLink] = "['/']"  fragment="contact"> Contact Us </a></li>
</ul>

Schritt 3: - Erstellen Sie einen Abschnitt / Div, indem Sie den ID-Namen mit dem Fragment abgleichen : -

<section id="home" class="home-section">
      <h2>  HOME SECTION </h2>
</section>

<section id="about" class="about-section">
        <h2>  ABOUT US SECTION </h2>
</section>

<section id="contact" class="contact-section">
        <h2>  CONTACT US SECTION </h2>
</section>

Als Referenz habe ich das folgende Beispiel hinzugefügt, indem ich eine kleine Demo erstellt habe, die zur Lösung Ihres Problems beiträgt.

Demo: https://routing-hashtag-page-anchors.stackblitz.io/

Ein bisschen spät, aber hier ist eine Antwort, die funktioniert hat:

<a [routerLink]="['/path']" fragment="test" (click)="onAnchorClick()">Anchor</a>

Und in der Komponente:

constructor( private route: ActivatedRoute, private router: Router ) {}

  onAnchorClick ( ) {
    this.route.fragment.subscribe ( f => {
      const element = document.querySelector ( "#" + f )
      if ( element ) element.scrollIntoView ( element )
    });
  }

Das Obige scrollt nicht automatisch zur Ansicht, wenn Sie bereits auf einer Seite mit einem Anker landen. Daher habe ich die obige Lösung in meinem ngInit verwendet, damit es auch damit funktioniert:

ngOnInit() {
    this.router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = this.router.parseUrl(this.router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(element); }
        }
      }
    });
  }

Stellen Sie sicher, dass Sie Router, ActivatedRoute und NavigationEnd am Anfang Ihrer Komponente importieren, und alles sollte einsatzbereit sein.

Quelle

Keine der vorherigen Antworten hat bei mir funktioniert. In einem letzten Versuch habe ich in meiner Vorlage versucht:

<a (click)="onClick()">From Here</a>
<div id='foobar'>To Here</div>

Mit diesem in meiner .ts:

onClick(){
    let x = document.querySelector("#foobar");
    if (x){
        x.scrollIntoView();
    }
}

Und es funktioniert wie erwartet für interne Links. Hierbei werden keine Ankertags verwendet, sodass die URL überhaupt nicht berührt wird.

Die oben genannten Lösungen haben bei mir nicht funktioniert ... Dieser hat es geschafft:

Bereiten Sie sich zunächst MyAppComponentauf 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 zum my-app-routeSenden eines prodIDHashtags

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

}

Alle anderen Antworten funktionieren mit Angular Version <6.1. Wenn Sie jedoch die neueste Version haben, müssen Sie diese hässlichen Hacks nicht ausführen, da Angular das Problem behoben hat.

Hier ist der Link zur Ausgabe

Alles, was Sie tun müssen, ist scrollOffsetdie Option des zweiten Argumentes der RouterModule.forRootMethode.

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      scrollPositionRestoration: 'enabled',
      anchorScrolling: 'enabled',
      scrollOffset: [0, 64] // [x, y]
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

Verwenden Sie dies für das Routermodul in app-routing.module.ts:

@NgModule({
  imports: [RouterModule.forRoot(routes, {
    useHash: true,
    scrollPositionRestoration: 'enabled',
    anchorScrolling: 'enabled',
    scrollOffset: [0, 64]
  })],
  exports: [RouterModule]
})

Dies wird in Ihrem HTML sein:

<a href="#/users/123#userInfo">

In der HTML-Datei:

<a [fragment]="test1" [routerLink]="['./']">Go to Test 1 section</a>

<section id="test1">...</section>
<section id="test2">...</section>

In der ts-Datei:

export class PageComponent implements AfterViewInit, OnDestroy {

  private destroy$$ = new Subject();
  private fragment$$ = new BehaviorSubject<string | null>(null);
  private fragment$ = this.fragment$$.asObservable();

  constructor(private route: ActivatedRoute) {
    this.route.fragment.pipe(takeUntil(this.destroy$$)).subscribe(fragment => {
      this.fragment$$.next(fragment);
    });
  }

  public ngAfterViewInit(): void {
    this.fragment$.pipe(takeUntil(this.destroy$$)).subscribe(fragment => {
      if (!!fragment) {
        document.querySelector('#' + fragment).scrollIntoView();
      }
    });
  }

  public ngOnDestroy(): void {
    this.destroy$$.next();
    this.destroy$$.complete();
  }
}

Da die Fragment-Eigenschaft immer noch kein Anker-Scrollen bietet, hat diese Problemumgehung den Trick für mich getan:

<div [routerLink]="['somepath']" fragment="Test">
  <a href="#Test">Jump to 'Test' anchor </a>
</div>

Zusätzlich zu Kalyoyans Antwort ist dieses Abonnement an den Router gebunden und bleibt so lange bestehen, bis die Seite vollständig aktualisiert ist. Stellen Sie beim Abonnieren von Router-Ereignissen in einer Komponente sicher, dass Sie sich in ngOnDestroy abmelden:

import { OnDestroy } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { Subscription } from "rxjs/Rx";

class MyAppComponent implements OnDestroy {

  private subscription: Subscription;

  constructor(router: Router) {
    this.subscription = router.events.subscribe(s => {
      if (s instanceof NavigationEnd) {
        const tree = router.parseUrl(router.url);
        if (tree.fragment) {
          const element = document.querySelector("#" + tree.fragment);
          if (element) { element.scrollIntoView(element); }
        }
      }
    });
  }

  public ngOnDestroy() {
    this.subscription.unsubscribe();
  }
}

Ich habe das gerade auf meiner eigenen Website zum Laufen gebracht, also dachte ich, es würde sich lohnen, meine Lösung hier zu veröffentlichen.

<a [routerLink]="baseUrlGoesHere" fragment="nameOfYourAnchorGoesHere">Link Text!</a>

<a name="nameOfYourAnchorGoesHere"></a>
<div>They're trying to anchor to me!</div>

Stellen Sie dann in Ihrer Komponente Folgendes sicher:

 import { ActivatedRoute } from '@angular/router';

 constructor(private route: ActivatedRoute) { 
     this.route.fragment.subscribe ( f => {
         const element = document.querySelector ( "#" + f )
         if ( element ) element.scrollIntoView ( element )
     });
 }

Nachdem ich alle Lösungen gelesen hatte, suchte ich nach einer Komponente und fand eine, die genau das tut, was die ursprüngliche Frage verlangte: Scrollen zu Ankerlinks. https://www.npmjs.com/package/ng2-scroll-to

Bei der Installation verwenden Sie folgende Syntax:

// app.awesome.component.ts
@Component({
   ...
   template: `...
        <a scrollTo href="#main-section">Scroll to main section</a>
        <button scrollTo scrollTargetSelector="#test-section">Scroll to test section</a>
        <button scrollTo scrollableElementSelector="#container" scrollYTarget="0">Go top</a>
        <!-- Further content here -->
        <div id="container">
            <section id="main-section">Bla bla bla</section>
            <section id="test-section">Bla bla bla</section>
        <div>
   ...`,
})
export class AwesomeComponent {
}

Es hat wirklich gut für mich funktioniert.

Eine einfache Lösung, die für Seiten ohne Abfrageparameter funktioniert, ist Browser-Vorwärts- / Rückwärts-, Router- und Deep-Linking-kompatibel.

<a (click)="jumpToId('anchor1')">Go To Anchor 1</a>


ngOnInit() {

    // If your page is dynamic
    this.yourService.getWhatever()
        .then(
            data => {
            this.componentData = data;
            setTimeout(() => this.jumpToId( window.location.hash.substr(1) ), 100);
        }
    );

    // If your page is static
    // this.jumpToId( window.location.hash.substr(1) )
}

jumpToId( fragment ) {

    // Use the browser to navigate
    window.location.hash = fragment;

    // But also scroll when routing / deep-linking to dynamic page
    // or re-clicking same anchor
    if (fragment) {
        const element = document.querySelector('#' + fragment);
        if (element) element.scrollIntoView();
    }
}

Das Zeitlimit besteht einfach darin, dass die Seite alle dynamischen Daten laden kann, die durch eine * ngIf "geschützt" sind. Dies kann auch verwendet werden, um beim Ändern der Route zum Anfang der Seite zu scrollen. Geben Sie einfach ein Standard-Tag für den oberen Anker an.

Hier ist eine weitere Problemumgehung unter Bezugnahme auf die Antwort von JavierFuentes:

<a [routerLink]="['self-route', id]" fragment="some-element" (click)="gotoHashtag('some-element')">Jump to Element</a>

im Skript:

import {ActivatedRoute} from "@angular/router";
import {Subscription} from "rxjs/Subscription";

export class Links {
    private scrollExecuted: boolean = false;

    constructor(private route: ActivatedRoute) {} 

    ngAfterViewChecked() {
            if (!this.scrollExecuted) {
              let routeFragmentSubscription: Subscription;
              routeFragmentSubscription = this.route.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();
                      }, 0);
                  }
                }
              });
            }
          }

        gotoHashtag(fragment: string) {
            const element = document.querySelector("#" + fragment);
            if (element) element.scrollIntoView(element);
        }
}

Auf diese Weise kann der Benutzer direkt zum Element scrollen, wenn der Benutzer direkt auf der Seite mit dem Hashtag in der URL landet.

Aber in diesem Fall habe ich Route Fragment in abonniert, wird ngAfterViewCheckedaber ngAfterViewChecked()kontinuierlich aufgerufen ngDoCheckund es erlaubt dem Benutzer nicht, nach oben zu scrollen. routeFragmentSubscription.unsubscribeDies wird nach einer Zeitüberschreitung von 0 Millis aufgerufen, nachdem die Ansicht zum Element gescrollt wurde.

Zusätzlich wird eine gotoHashtagMethode definiert, um zum Element zu scrollen, wenn der Benutzer speziell auf das Ankertag klickt.

Aktualisieren:

Wenn die URL Querystrings enthält, werden die Querystrings [routerLink]="['self-route', id]"im Anker nicht beibehalten. Ich habe versucht, die gleiche Problemumgehung zu finden:

<a (click)="gotoHashtag('some-element')">Jump to Element</a>

constructor( private route: ActivatedRoute,
              private _router:Router) {
}
...
...

gotoHashtag(fragment: string) {
    let url = '';
    let urlWithSegments = this._router.url.split('#');

    if(urlWithSegments.length){
      url = urlWithSegments[0];
    }

    window.location.hash = fragment;
    const element = document.querySelector("#" + fragment);
    if (element) element.scrollIntoView(element);
}

Dieser arbeitet für mich !! Damit das Tag dynamisch verankert wird, müssen Sie warten, bis es gerendert ist

HTML:

<div #ngForComments *ngFor="let cm of Comments">
    <a id="Comment_{{cm.id}}" fragment="Comment_{{cm.id}}" (click)="jumpToId()">{{cm.namae}} Reply</a> Blah Blah
</div>

Meine ts-Datei:

private fragment: string;
@ViewChildren('ngForComments') AnchorComments: QueryList<any>;

ngOnInit() {
      this.route.fragment.subscribe(fragment => { this.fragment = fragment; 
   });
}
ngAfterViewInit() {
    this.AnchorComments.changes.subscribe(t => {
      this.ngForRendred();
    })
}

ngForRendred() {
    this.jumpToId()
}

jumpToId() { 
    let x = document.querySelector("#" + this.fragment);
    console.log(x)
    if (x){
        x.scrollIntoView();
    }
}

Vergessen Sie nicht , dass zu importieren ViewChildren, QueryListetc .. und einige Konstruktor hinzufügen ActivatedRoute!!

Im Gegensatz zu anderen Antworten würde ich zusätzlich auch hinzufügen , focus()zusammen mit scrollIntoView(). Außerdem verwende ich, setTimeoutda es sonst beim Ändern der URL nach oben springt. Ich bin mir nicht sicher, was der Grund dafür war, aber es scheintsetTimeout dies die Problemumgehung bewirkt.

Ursprung:

<a [routerLink] fragment="some-id" (click)="scrollIntoView('some-id')">Jump</a>

Ziel:

<a id="some-id" tabindex="-1"></a>

Typoskript:

scrollIntoView(anchorHash) {
    setTimeout(() => {
        const anchor = document.getElementById(anchorHash);
        if (anchor) {
            anchor.focus();
            anchor.scrollIntoView();
        }
    });
}

Ich hatte das gleiche Problem. Die Lösung: Verwenden des View Port Scroller https://angular.io/api/common/ViewportScroller#scrolltoanchor

- app-routing.module.ts Code:

import { PageComponent } from './page/page.component';

const routes: Routes = [
   path: 'page', component: PageComponent },
   path: 'page/:id', component: PageComponent }
];

- Komponenten-HTML

  <a (click) = "scrollTo('typeExec')">
    <mat-icon>lens</mat-icon>
  </a>

- Komponentencode:

    import { Component } from '@angular/core';
    import { ViewportScroller } from '@angular/common';


    export class ParametrageComponent {

      constructor(private viewScroller: ViewportScroller) {}

      scrollTo(tag : string)
      {
        this.viewScroller.scrollToAnchor(tag);
      }

    }

Wenn es nicht wichtig ist, diese Element-IDs an die URL anzuhängen, sollten Sie sich diesen Link ansehen:

Winkel 2 - Ankerverknüpfungen zum Element auf der aktuellen Seite

// html
// add (click) event on element
<a (click)="scroll({{any-element-id}})">Scroll</a>

// in ts file, do this
scroll(sectionId) {
let element = document.getElementById(sectionId);

  if(element) {
    element.scrollIntoView(); // scroll to a particular element
  }
 }

Ich habe gerade ein sehr nützliches Plugin getestet, das in nmp verfügbar ist - ngx-scroll-to , was für mich großartig funktioniert. Es ist jedoch für Angular 4+ konzipiert, aber vielleicht findet jemand diese Antwort hilfreich.

Ich habe die meisten dieser Lösungen ausprobiert, aber es gab Probleme beim Verlassen und Zurückkommen mit einem anderen Fragment, das nicht funktionieren würde. Deshalb habe ich etwas anderes gemacht, das zu 100% funktioniert, und den hässlichen Hash in der URL beseitigt.

Hier ist ein besserer Weg als das, was ich bisher gesehen habe.

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

@Component({
    selector: 'app-hero',
    templateUrl: './hero.component.html',
    styleUrls: ['./hero.component.scss']
})
export class HeroComponent implements OnInit, AfterViewChecked, OnDestroy {
    private fragment: string;
    fragSub: Subscription;

    constructor(private route: ActivatedRoute) { }

    ngOnInit() {
        this.fragSub = this.route.fragment.subscribe( fragment => { this.fragment = fragment; })
    }

    ngAfterViewChecked(): void {
        try {
            document.querySelector('#' + this.fragment).scrollIntoView({behavior: 'smooth'});
            window.location.hash = "";
          } catch (e) { }
    }

    ngOnDestroy() {
        this.fragSub.unsubscribe();
    }
}