Sayfa çapasına Hashtag ile Angular2 Yönlendirme

Benim Angular2 sayfada bazı bağlantılar eklemek için tıklayın, belirli konumlara atlamak çıkacağı zaman olacağı isteyen dahilinde Normal hashtag ne gibi o sayfada. Yani bağlantılar şöyle bir şey olurdu

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

vb.

Normal Angular2 yönteminde sorun olmadığından, HashLocationStrategy'ye ihtiyacım olduğunu sanmıyorum, ancak doğrudan eklersem, bağlantı aslında aynı sayfada bir yere değil, köke atlar. Herhangi bir yön takdir edilir, teşekkürler.

Güncelleme

Bu artık destekleniyor

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

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

Kaydırmak için aşağıdaki kodu bileşeninize ekleyin

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

orijinal

Bu bilinen bir sorundur ve https://github.com/angular/angular/issues/6595 adresinde izlenmektedir.

Her ne kadar Günter cevabı doğrudur, o bağlantı etiketi parçası "için atlamayı" kapsamaz .

Bu nedenle ek olarak:

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

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

... bir "atlama" davranışına ihtiyaç duyduğunuz bileşende (üst öğe) şunu ekleyin:

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

  }
}

Lütfen bunun geçici bir çözüm olduğunu unutmayın ! Gelecekteki güncellemeler için bu github sorununu takip edin . Çözümü sağladığı için Victor Savkin'e kredi !

Biraz geç cevap verdiğim için özür dilerim; Açısal Yönlendirme Dokümantasyonunda, bir hashtag ile sayfa çapasına yönlendirmemize yardımcı olan, yani anchorScrolling: 'etkin' olan önceden tanımlanmış bir işlev vardır.

Adım-1: - Önce RouterModule'u app.module.ts dosyasına içe aktarın: -

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

Adım 2: - HTML Sayfa Git navigasyon oluşturmak ve iki önemli gibi özelliklerini eklemek [routerLink] ve fragman ilgili eşleştirme için Div kimlikleri : -

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

Adım 3: - eşleştirerek bir kesit / div oluşturma İD adı ile fragmanı : -

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

Referans olması için, probleminizi çözmenize yardımcı olacak küçük bir demo oluşturarak aşağıdaki örneği ekledim.

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

Biraz geç ama işe yaradığını bulduğum bir cevap:

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

Ve bileşende:

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

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

Halihazırda bir bağlantıya sahip bir sayfaya gelirseniz yukarıdakiler otomatik olarak görünüme geçmez, bu yüzden bununla da çalışabilmesi için ngInit'imde yukarıdaki çözümü kullandım:

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

Bileşeninizin başlangıcında Router, ActivatedRoute ve NavigationEnd'i içe aktardığınızdan emin olun ve gitmesi iyi olacaktır.

Kaynak

Önceki cevapların hiçbiri benim için işe yaramadı. Son bir hendek çabasında şablonumda denedim:

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

Bununla .ts'imde:

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

Ve iç bağlantılar için beklendiği gibi çalışır. Bu aslında bağlantı etiketlerini kullanmaz, bu nedenle URL'ye hiç dokunmaz.

Yukarıdaki çözümler benim için işe yaramadı ... Bunu yaptı:

İlk olarak, MyAppComponentotomatik kaydırmaya hazırlanın ngAfterViewChecked () 'de ...

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

              }
            }
          } );
    }

  }

}

Ardından hashtag my-app-routegöndermeye gidinprodID

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

}

Diğer tüm cevaplar, Açısal sürüm <6.1 üzerinde çalışacaktır. Ancak en son sürüme sahipseniz, Angular sorunu çözdüğü için bu çirkin saldırıları yapmanız gerekmeyecektir.

işte sorun bağlantısı

Tek yapmanız gereken scrollOffset, RouterModule.forRootyöntemin ikinci bağımsız değişkeninin seçeneğiyle ayarlamaktır .

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

Bunu aşağıdaki yönlendirici modülü için kullanın app-routing.module.ts:

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

Bu, HTML'nizde olacaktır:

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

Html dosyasında:

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

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

Ts dosyasında:

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

Parça özelliği hala çapa kaydırma sağlamadığından, bu geçici çözüm benim için hile yaptı:

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

Kalyoyan'ın cevabına ek olarak , bu abonelik yönlendiriciye bağlı ve sayfa tamamen yenilenene kadar geçerli olacak. Bir bileşendeki yönlendirici olaylarına abone olurken ngOnDestroy aboneliğinden çıktığınızdan emin olun:

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

Bunu kendi web sitemde çalıştırdım, bu yüzden çözümümü buraya göndermeye değeceğini düşündüm.

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

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

Ve sonra bileşeninize şunu eklediğinizden emin olun:

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

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

Tüm çözümleri okuduktan sonra, bir bileşen aradım ve orijinal sorunun tam olarak istediği şeyi yapan bir bileşen buldum: bağlantı bağlantılarına kaydırma. https://www.npmjs.com/package/ng2-scroll-to

Yüklediğinizde, aşağıdaki gibi sözdizimini kullanırsınız:

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

Benim için gerçekten iyi çalıştı.

Herhangi bir sorgu parametresi olmayan sayfalar için çalışan basit bir çözüm, tarayıcı geri / ileri, yönlendirici ve derin bağlantı uyumludur.

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

Zaman aşımı, sayfanın bir * ngIf tarafından "korunan" dinamik verileri yüklemesine izin vermek içindir. Bu, rotayı değiştirirken sayfanın üst kısmına kaydırmak için de kullanılabilir - sadece varsayılan bir üst bağlantı etiketi sağlamanız yeterlidir.

bu öğe kimliklerinin url'ye eklenmesinin bir önemi yoksa, şu bağlantıya bir göz atmayı düşünmelisiniz:

Angular 2 - Mevcut Sayfadaki Elemana Bağlantılar

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

İşte JavierFuentes cevabına referansla ilgili başka bir geçici çözüm:

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

komut dosyasında:

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

Bu, kullanıcının URL'sinde hashtag bulunan sayfaya doğrudan gelirse, kullanıcının doğrudan öğeye kaydırmasına izin verir.

Ancak bu durumda, Rota Fragmanına abone oldum ngAfterViewCheckedancak ngAfterViewChecked()her seferinde sürekli olarak çağrılıyor ngDoCheckve kullanıcının en üste geri dönmesine izin vermiyor, bu yüzdenrouteFragmentSubscription.unsubscribe görünüm öğeye kaydırıldıktan sonra 0 milisaniyelik bir zaman aşımından sonra çağrılıyor.

Ek olarak gotoHashtag, kullanıcı özellikle bağlantı etiketini tıkladığında öğeye kaydırmak için yöntem tanımlanır.

Güncelleme:

Url'de sorgu dizeleri varsa [routerLink]="['self-route', id]"bağlantıda sorgu dizeleri korunmaz. Aynı geçici çözümü takip etmeyi denedim:

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

Bu benim için çalışıyor !! Bu ng için dinamik olarak bağlantı etiketi, işlenmelerini beklemeniz gerekir

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>

Ts dosyam:

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

Bunu ViewChildren, QueryListvb. İçe aktarmayı ve bir kurucu eklemeyi unutmayın ActivatedRoute!!

Diğer cevaplar aksine de buna ek olarak eklersiniz focus()ile birlikte scrollIntoView(). Ayrıca setTimeoutURL'yi değiştirirken aksi halde üste atladığı için kullanıyorum . Bunun sebebinin ne olduğundan emin değilim ama öyle görünüyorsetTimeout geçici çözüm .

Menşei:

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

Hedef:

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

typescript:

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

Ben de aynı sorunu yaşadım. Çözüm: View port Scroller'ı kullanma https://angular.io/api/common/ViewportScroller#scrolltoanchor

- app-routing.module.ts kodu:

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

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

- Bileşen HTML

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

- Bileşenin kodu:

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


    export class ParametrageComponent {

      constructor(private viewScroller: ViewportScroller) {}

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

    }

Nmp - ngx-scroll-to'da bulunan ve benim için harika çalışan çok faydalı eklentiyi test ettim. Bununla birlikte, Angular 4+ için tasarlanmıştır, ancak belki birileri bu cevabı yararlı bulabilir.

Bu çözümlerin çoğunu denedim, ancak işe yaramayacağı başka bir parçayla çıkıp geri dönerken sorunlarla karşılaştım, bu yüzden% 100 çalışan biraz farklı bir şey yaptım ve URL'deki çirkin hash'den kurtuldum.

tl; dr, şimdiye kadar gördüğümden daha iyi bir yol.

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