Routing Angular2 con hashtag all'ancoraggio della pagina

Desidero aggiungere alcuni collegamenti sulla mia pagina Angular2, che quando cliccheranno salteranno a posizioni specifiche all'interno quella pagina, come fanno i normali hashtag. Quindi i collegamenti sarebbero qualcosa di simile

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

eccetera.

Non credo di aver bisogno di HashLocationStrategy, poiché sto bene con il normale modo Angular2, ma se aggiungo direttamente, il collegamento salterebbe effettivamente alla radice, non da qualche parte sulla stessa pagina. Qualsiasi direzione è apprezzata, grazie.

Aggiornare

Questo è ora supportato

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

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

Aggiungi sotto il codice al tuo componente per scorrere

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

Originale

Si tratta di un problema noto e monitorato su https://github.com/angular/angular/issues/6595

Sebbene la risposta di Günter sia corretta, non copre il "salto" alla parte del tag di ancoraggio .

Pertanto, oltre a:

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

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

... nel componente (genitore) dove hai bisogno di un comportamento "jump to", aggiungi:

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

  }
}

Tieni presente che questa è una soluzione alternativa ! Segui questo problema di GitHub per aggiornamenti futuri. Crediti a Victor Savkin per aver fornito la soluzione!

Scusa per aver risposto un po 'tardi; C'è una funzione predefinita nella documentazione del routing angolare che ci aiuta a instradare con un hashtag all'ancoraggio della pagina, ad esempio anchorScrolling: 'enabled'

Passaggio 1: - Per prima cosa importa il RouterModule nel file app.module.ts: -

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

Passaggio 2: - Vai alla pagina HTML, crea la navigazione e aggiungi due attributi importanti come [routerLink] e frammento per abbinare i rispettivi ID Div : -

<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>

Passaggio 3: - Crea una sezione / div facendo corrispondere il nome dell'ID con il frammento : -

<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>

Per tuo riferimento, ho aggiunto l'esempio di seguito creando una piccola demo che aiuta a risolvere il tuo problema.

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

Un po 'tardi ma ecco una risposta che ho trovato che funziona:

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

E nel componente:

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

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

Quanto sopra non scorre automaticamente nella vista se si atterra su una pagina con già un'ancora, quindi ho usato la soluzione sopra nel mio ngInit in modo che potesse funzionare anche con quello:

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

Assicurati di importare Router, ActivatedRoute e NavigationEnd all'inizio del tuo componente e dovrebbe essere tutto a posto.

fonte

Nessuna delle risposte precedenti ha funzionato per me. In un ultimo disperato tentativo, ho provato nel mio modello:

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

Con questo nel mio .ts:

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

E funziona come previsto per i collegamenti interni. Questo in realtà non utilizza i tag di ancoraggio, quindi non toccherebbe affatto l'URL.

Le soluzioni sopra non hanno funzionato per me ... Questa ha funzionato:

Per prima cosa, preparati MyAppComponentper lo scorrimento automatico 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 );

              }
            }
          } );
    }

  }

}

Quindi, vai my-app-routeall'invio di prodIDhashtag

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

}

Tutte le altre risposte funzioneranno con la versione Angular <6.1. Ma se hai l'ultima versione, non avrai bisogno di fare questi brutti hack poiché Angular ha risolto il problema.

ecco il link al problema

Tutto quello che devi fare è impostare scrollOffsetcon l'opzione del secondo argomento del RouterModule.forRootmetodo.

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

Usalo per il modulo router in app-routing.module.ts:

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

Questo sarà nel tuo HTML:

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

Nel file html:

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

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

Nel file ts:

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

Poiché la proprietà fragment non fornisce ancora lo scorrimento dell'ancora, questa soluzione alternativa ha funzionato per me:

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

Aggiungendo alla risposta di Kalyoyan , questo abbonamento è legato al router e rimarrà attivo fino a quando la pagina non sarà completamente aggiornata. Quando ti iscrivi agli eventi del router in un componente, assicurati di annullare l'iscrizione in ngOnDestroy:

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

Ho appena ottenuto questo lavoro sul mio sito Web, quindi ho pensato che sarebbe valsa la pena pubblicare la mia soluzione qui.

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

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

E poi nel tuo componente, assicurati di includere questo:

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

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

Dopo aver letto tutte le soluzioni, ho cercato un componente e ne ho trovato uno che fa esattamente quello che chiedeva la domanda originale: scorrere per ancorare i collegamenti. https://www.npmjs.com/package/ng2-scroll-to

Quando lo installi, usi una sintassi come:

// 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 {
}

Ha funzionato molto bene per me.

Una soluzione semplice che funziona per le pagine senza parametri di query, è compatibile con il browser back / forward, router e deep-linking.

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

Il timeout serve semplicemente per consentire alla pagina di caricare qualsiasi dato dinamico "protetto" da un * ngIf. Può essere utilizzato anche per scorrere fino alla parte superiore della pagina quando si cambia percorso: è sufficiente fornire un tag di ancoraggio superiore predefinito.

se non importa avere quegli ID elemento aggiunti all'URL, dovresti considerare di dare un'occhiata a questo link:

Angolare 2 - Collegamenti di ancoraggio all'elemento nella pagina corrente

// 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
  }
 }

Ecco un'altra soluzione alternativa con riferimento alla risposta di JavierFuentes:

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

nello script:

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

Ciò consente all'utente di scorrere direttamente all'elemento, se l'utente atterra direttamente sulla pagina con hashtag nell'URL.

Ma in questo caso, ho sottoscritto il percorso Fragment in ngAfterViewCheckedma ngAfterViewChecked()viene chiamato continuamente per ogni ngDoChecke non consente all'utente di tornare all'inizio, quindirouteFragmentSubscription.unsubscribe viene chiamato dopo un timeout di 0 millisecondi dopo che la vista è stata fatta scorrere all'elemento.

Inoltre gotoHashtag , viene definito il metodo per scorrere fino all'elemento quando l'utente fa clic specificamente sul tag di ancoraggio.

Aggiornare:

Se l'URL ha querystrings, [routerLink]="['self-route', id]"in anchor non conserverà le querystrings. Ho provato a seguire la soluzione alternativa per lo stesso:

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

Questo funziona per me !! Questo ngFor quindi è un tag di ancoraggio dinamico, è necessario attendere il rendering

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>

Il mio file ts:

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

Non dimenticare di importarlo ViewChildren, QueryListecc. E aggiungere qualche costruttore ActivatedRoute!!

A differenza di altre risposte, aggiungerei anche focus()insieme scrollIntoView(). Inoltre sto usando setTimeoutpoiché salta in alto altrimenti quando si cambia l'URL. Non sono sicuro di quale fosse la ragione per questo, ma sembra setTimeoutche la soluzione sia.

Origine:

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

Destinazione:

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

Dattiloscritto:

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

Ho avuto lo stesso problema. La soluzione: usare View port Scroller https://angular.io/api/common/ViewportScroller#scrolltoanchor

- codice app-routing.module.ts:

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

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

- Componente HTML

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

- Codice componente:

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


    export class ParametrageComponent {

      constructor(private viewScroller: ViewportScroller) {}

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

    }

Ho appena testato un plugin molto utile disponibile in nmp - ngx-scroll-to , che funziona alla grande per me. Tuttavia è progettato per Angular 4+, ma forse qualcuno troverà utile questa risposta.

Ho provato la maggior parte di queste soluzioni ma ho avuto problemi a lasciare e tornare con un altro frammento che non avrebbe funzionato, quindi ho fatto qualcosa di un po 'diverso che funziona al 100% e mi sbarazzo del brutto hash nell'URL.

tl; dr ecco un modo migliore di quello che ho visto finora.

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