एंगुलर 2 हैशटैग रूटिंग एंकर को पृष्ठ

Question

स्थानांतरित नहीं करता है इसलिए मैंने यूआरएल में एक टुकड़ा जोड़ने का तरीका जानने के लिए निम्न पोस्ट का उपयोग किया।

Angular2 Routing with Hashtag to page anchor

और टुकड़ा ठीक जोड़ा जाता है, हालांकि पेज जिसके परिणामस्वरूप लंगर में नहीं जाते हैं। मैंने div गंतव्य पर name और id विशेषता दोनों का उपयोग करने का प्रयास किया है, लेकिन न ही काम करने लगते हैं।

मैं कोणीय संस्करण 2.0.0-आरसी.3, और राउटर संस्करण 3.0.0-alpha.6 का उपयोग कर रहा हूं।

धन्यवाद!

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

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

2 तत्वों के बीच पर्याप्त जगह है कि यह बताने के लिए कि पृष्ठ वास्तव में चलता है या नहीं।

और जैसा कि पहले कहा गया है, यूआरएल सही ढंग से #destination जोड़ता है।

Answer 1

एक वर्कअराउंड आपके घटक में एक फ़ंक्शन लिखना हो सकता है जो उस स्थान की आईडी पर location.hash सेट करता है जिसे आप नेविगेट करना चाहते हैं।

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

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

फिर अपने घटक में

:

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

Answer 2

आप भी इस प्लगइन https://www.npmjs.com/package/ng2-page-scroll यह किसी दिए गए लंगर के लिए एक एनिमेटेड स्क्रॉल करता है का उपयोग कर सकते हैं।

Answer 3

यह मेरे लिए काम किया:

पहले, MyAppComponent स्वत: स्क्रॉल के लिए में 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); 
       } 
      } 
      }); 
    } 

    } 

} 

prodID हैशटैग तैयार फिर, भेजने my-app-route पर नेविगेट

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

} 

Answer 4

इस कामकाज को चाल

करना चाहिए

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

Answer 5

यहाँ एक बहुत ही सरल उपाय है कि मेरे लिए काम किया है:

घटक में, इस पद्धति जोड़ें:

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

और ध्यान में रखते हुए, <a> टैग इस तरह दिखाई देगा:

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

Answer 6

यहां सभी समाधान देखने के बाद, मैंने एक छोटे और सरल निर्देश के साथ जाने का फैसला किया। यहां बताया गया है कि मैं किस प्रकार समाप्त हुआ:

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

विचार कुछ लचीला बनाना था, जो पृष्ठ पर किसी भी तत्व से जुड़ा जा सकता था।

उपयोग:

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

और भूल नहीं है अपने मॉड्यूल में से एक पर निर्देश घोषित करने के लिए:

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

Answer 7

मैं एन एम पी में बहुत उपयोगी उपलब्ध प्लगइन पाया है - ngx-scroll-to है, जो काम करता है मेरे लिए बहुत अच्छा हालांकि यह कोणीय 4+ के लिए डिज़ाइन किया गया है, लेकिन शायद किसी को यह उत्तर उपयोगी लगेगा।