New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fragment routing is not working #13636

Closed
vlavellauruit opened this Issue Dec 22, 2016 · 18 comments

Comments

Projects
None yet
@vlavellauruit

vlavellauruit commented Dec 22, 2016

I'm trying to add an anchor link on my current angular2 app.
I've made the navigation first using the fragment attribute and because It didn't work I've referenced the fragment by using the router navigation. I couldn't make it work in both scenarios.

I've been playing with https://angular.io/resources/live-examples/router/ts/eplnkr.html and doesn't seem to be working too.

I followed step by step the tutorial on the routing documentation...

Can you provide any help?

@Tragetaschen

This comment has been minimized.

Contributor

Tragetaschen commented Mar 7, 2017

type: bug? Feature?

@HauntedSmores

This comment has been minimized.

HauntedSmores commented Mar 28, 2017

Any update on this? I also cant get fragments to work at all

@lizjulien

This comment has been minimized.

lizjulien commented Apr 25, 2017

You must scratch the browser :

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

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

Then in your component:

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

Tada !

@bjornharvold

This comment has been minimized.

bjornharvold commented May 2, 2017

I'm getting this too with v2.4.10. I would prefer not to have to "scratch the browser" if I can avoid it ;-)

@lizjulien

This comment has been minimized.

lizjulien commented May 2, 2017

For now, it's the only one workaround, hope too it will be fixed, maybe with a *Service

@play-nirvik

This comment has been minimized.

play-nirvik commented May 19, 2017

@lizjulien This works on locally but, what if wanted to goto a particular section in a totally different page?

@bjornharvold

This comment has been minimized.

bjornharvold commented May 30, 2017

Also not working on latest version of Angular 4. What is the Angular team doing about this?

@play-nirvik

This comment has been minimized.

play-nirvik commented May 30, 2017

@bjornharvold : You can paste the below work around inside the constructor of the target component to make it work for now.

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

This comment has been minimized.

bjornharvold commented May 30, 2017

Thank you @play-nirvik . I've seen a few options but it should really be looked at by the Angular team. Anchor links not working on an html page is a pretty big [but small] thing.

@deantoni

This comment has been minimized.

deantoni commented Jul 4, 2017

any updates on this?

@jeanpaulattard

This comment has been minimized.

jeanpaulattard commented Jul 24, 2017

This problem is still present in version 4.3.1.

Here's a small plunker to demonstrate it. (Suggest to run the plunk in a separate window to see the url changes).

https://plnkr.co/edit/oX7QjaF40lfB2rW653bn?p=preview

@bjornharvold

This comment has been minimized.

bjornharvold commented Jul 24, 2017

Bump

@Nexeuz

This comment has been minimized.

Nexeuz commented Sep 5, 2017

Any Update for this?

@iuliust

This comment has been minimized.

iuliust commented Sep 11, 2017

Is there any workaround ? It doesn't seem to work for me either… It only works when I directly use an href attribute to navigate to an element that is declared within the same template 😞

Did it ever work for anyone ?

@louisl

This comment has been minimized.

louisl commented Sep 27, 2017

Ran into this issue, using the answers here I came up with this for now. In my case I also had to give a little time for an element to show before I could scroll to it hence the little setTimeout hack.

  /**
   * Scroll to anchor
   *
   * @param {string} location Element id
   * @param {string} wait     Wait time in milliseconds
   */
  public scrollToAnchor(location: string, wait: number): void {
    const element = document.querySelector('#' + location)
    if (element) {
      setTimeout(() => {
        element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
      }, wait)
    }
  }

this.scrollToAnchor('some-anchor', 100)
@micronyks

This comment has been minimized.

micronyks commented Sep 30, 2017

@louisl this hack is good. I liked it and working fine.

This issue is not assigned to anyone so its been open since very long.
I wish to get an official solution as soon as possible.
Been waiting since long.
Please guys do something for it.

@bjornharvold

This comment has been minimized.

bjornharvold commented Oct 22, 2017

Can someone on the Angular team please confirm that this is an issue and assign it a bug status? There has been no forward movement on this for months. Another ticket with the same issue. #12197

@vorotech

This comment has been minimized.

vorotech commented Oct 27, 2017

I think the issue #6595 is the one where the progress is tracked.

@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2018

kong0107 added a commit to kong0107/mojLaw that referenced this issue Apr 15, 2018

jasonaden added a commit to vsavkin/angular that referenced this issue Jun 7, 2018

feat(router): implement scrolling restoration service
For documentation, see `RouterModule.scrollPositionRestoration`

Fixes #13636 #10929 #7791 #6595

@mhevery mhevery closed this in 49c5234 Jun 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment