1

I want to know is this bug or specification that i can't find. In Angular 5, when I use routerLink like this

<button routerLink="/account/order/{{this.orderService.order._id}}/messages">Messages</button>

All works fine and I can route to URL /account/order/5aaaa0c6fd204609b3bd2577/messages in my component. But if I open Chrome DevTools (I try it in Firefox DevTools too) I see line like this:

<button _ngcontent-c4="" class="btn" tabindex="0" ng-reflect-router-link="/account/order/5aaaa0c6fd20460">Messages</button>

I tried to use different assigns for routerLink, but for all of that I got cutting real href (I put creating url string in component.ts and put only string variable in routerLink and other methods like [routerLink] creation). For first time it looks like ng-reflect-router-link have not so much length. But I try use simple string in href and in DevTools I see normal link like this:

<button _ngcontent-c4="" class="btn" routerlink="/123456789123456789123456789123456789123456789123456789123456789" tabindex="0" ng-reflect-router-link="/12345678912345678912345678912">Messages</button>

Anybody know, why I getting cutting real href? Maybe exist specialization or documentation for this behaviour or this looks like a bug and i need create issue on GitHub angular repo?

Denis Savenko
  • 829
  • 1
  • 13
  • 29
  • Can't find any information and create a issue on GitHub https://github.com/angular/angular/issues/22845 – Denis Savenko Mar 17 '18 at 15:39
  • 1
    Why you need `ng-reflect-router-link`, if you can navigate as expected? – Yerkon Mar 17 '18 at 16:28
  • I tried to check working my dynamic form and spent 2 hours to understand, why in devtools I see broken ObjectId link. I didn't click it, because not expect, that it can be working with not full URL. And second, if user have problem on button, they can't see URL adress on left bottom corner (like hover on link), and if i ask they send me link from devtools - i will get wrong adress and can't detect problem. – Denis Savenko Mar 17 '18 at 17:21

1 Answers1

0

Explanation from GitHub issue.

Using for navigation is generally a bad idea, due to accessibility issues. See https://marcysutton.com/links-vs-buttons-in-modern-web-applications/

If [routerLink] is applied to an anchor tag, then the href is appropriately set, as far as I can tell - the href is the thing a user sees when they hover over a link. Buttons don't have an href (or shouldn't), and so you're not seeing the property reflected into the DOM.

ng-reflect---- properties are for debugging / devtime only, and they're truncated so they don't dump huge amounts of data into the DOM.

Community
  • 1
  • 1
Denis Savenko
  • 829
  • 1
  • 13
  • 29