Jakiś czas temu, w trakcie debuggowania aplikacji zauważyłam dziwną rzecz. Mianowicie po wybraniu z menu opcji Stoły do gier lub Moje stoły do gier, obydwie pozycje były podświetlone. Wyglądało to tak:

A html tak:

Jak widać, obydwa elementy  mają klasę active. Jak to możliwe?

Ano łatwo zauważyć, że obywa elementy mają taki sam kontroler (początek url – gameTables). Wystarcza więc, że url zgadza się częściowo – i już obydwa elementy zostają przyporządkowane do jednego worka. Żeby temu zapobiec, należy dodać odpowiedni atrybut w elemencie zawierającym routerLink (w moim przypadku w elemencie a).

[routerLinkActiveOptions]="{exact: true}"

Dokumentację możecie przeczytać tutaj.

Po zmianach okazało się, że działa poprawnie: