0

How can I create Router links that can navigate to specific section of my single page app(Angular2)

For example my website www.example.com has three products: productOne,productTwo nad productThree.

On my website thats three section with 100vh.

I want to have url with www.example.com/productOne / www.example.com/productTwo /www.example.com/productThree that navigates to that segment of page.

  • i don't want my link to have #
Nenad Drobac
  • 31
  • 5
  • 1
    Have a look at [this](https://stackoverflow.com/questions/40498333/angular2-how-to-navigate-to-certain-section-of-the-page-identified-with-an-id-at) – Vikas Jun 15 '18 at 18:00
  • Possible duplicate of [Angular2 How to navigate to certain section of the page identified with an id attribute](https://stackoverflow.com/questions/40498333/angular2-how-to-navigate-to-certain-section-of-the-page-identified-with-an-id-at) – Greg McMullen Jun 15 '18 at 18:22

1 Answers1

1

You should be able to achieve this by using anchors: <a href="#section">Link to Section 1</a> or https://www.yoursite.com/#section.

<body>
    <section id="#section">
        <div id="#div"></div>
    </section>
    <footer id="#footer">
        ...
    </footer>
  ...
oldboy
  • 5,729
  • 6
  • 38
  • 86
  • I dont want to use # in url, thats the problem – Nenad Drobac Jun 15 '18 at 18:13
  • @NenadDrobac well, then put that in your question, so people don't waste their precious time trying to help you out :/ i don't believe there is any way to do it that way, but i may be wrong. – oldboy Jun 15 '18 at 18:17
  • I've put how my link should look like. I will also edit so it could be more understandable – Nenad Drobac Jun 15 '18 at 18:20
  • 1
    @NenadDrobac this is the standard way of doing things has been an option in browsers for a very very long time and in use since early days of the internet I wonder why going this route is an issue (most end users don't pay attention to the URL anyhow) if you must you could define multiple routes that use the same component and write logic into the component to check the URL and update the scroll position but lots of work for small 'benefit' (really deviating from norm) – shaunhusain Jun 15 '18 at 21:12
  • @shaunhusain would he be able to edit the `.htaccess` file to achieve something like this?? – oldboy Jun 15 '18 at 21:29
  • Believe since the server handles the .htaccess redirects if it was done there the URL would be changed in the clients browser still. You could certainly setup redirects but would need to pass along the info about the original route somehow and user would just be seeing the redirect destination instead of whatever they typed in same sort of issue with just defining redirects in the angular routing hence suggested just using the same component for multiple routes... Only down side I see with that is it will be reloading the component more than necessary. – shaunhusain Jun 15 '18 at 21:39
  • @shaunhusain i'm just thinking cuz i know u can remove file extensions from the url! honestly, i dont know enough about this sort of stuff tho – oldboy Jun 15 '18 at 21:50
  • 1
    Yah all good routing between the server and client gets confusing for sure hence asking why deviate from the norm you suggested here. If the OP responds and has some reasonable sounding reason then will give it a go on stackblitz, but like you mentioned don't want to waste the time without understanding the motivation – shaunhusain Jun 15 '18 at 21:54
  • @shaunhusain yeah, deviating from the standard doesn't make much sense to me either :/ – oldboy Jun 15 '18 at 21:56