1

When I redirect page using below code. A page will redirect to page 3 but not redirect to div third.

this.router.navigateByUrl('/page5#third');

And when I hit URL http://localhost:4200/page5#third then a page will redirect to dit third. If any another way for # base routing in angular then please suggest.

here is my HTML code.

<div id="first">
  <div>
    <h2>Image 1</h2>
  </div>
  <img src="assets\img\pexels-photo-39811.jpeg">
</div>
<div id="second">
  <h2>Image 2</h2>
  <img src="assets\img\pexels-photo-459225.jpeg">
</div>
<div id="third">
  <h2>Image 3</h2>
  <img src="assets\img\pexels-photo.jpg">
</div>
Dbshah
  • 135
  • 2
  • 10
  • 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) – deepchudasama Dec 11 '18 at 07:35
  • Here #third is a `fragment` of route `page`. If u want to use HashBased routing, then you need to change the LocationStrategy in your root routing file. i.e `RouterModule.forRoot() ` – KiraAG Dec 11 '18 at 07:51

1 Answers1

1

It sounds like you are expecting the # (hash) in the route to navigate to a particular place in the page? (not asking about Hash-based routing?)

See this article: https://medium.com/lacolaco-blog/introduce-router-scroller-in-angular-v6-1-ef34278461e9

Or you could try the fragments feature documented here: https://angular.io/guide/router#query-parameters-and-fragments

DeborahK
  • 57,520
  • 12
  • 104
  • 129
  • what is Hash-based routing? If you can explain then it will help. – Dbshah Dec 11 '18 at 08:40
  • This is not working after refreshing the page. For the first time, it fails to redirect but after It will be redirecting successfully. – Dbshah Dec 11 '18 at 09:26
  • You can find out about hash-based routing here: https://angular.io/guide/router#appendix-locationstrategy-and-browser-url-styles – DeborahK Dec 11 '18 at 15:55
  • If there is something that is not working, please create a new question with details on the new issue. – DeborahK Dec 11 '18 at 15:55