When I reload/refresh my app the routes in the menubar are displayed and all of the items are set to active. I have configured for the Routes:
export const routes: Routes = [
{
path: '', pathMatch: 'full', redirectTo: 'home',
data: { title: undefined }
},
{
path: 'login', component: LoginComponent,
data: { title: 'Login' }
},
{
path: 'home', component: MainComponent,
data: { title: 'Home' }
},
{
path: 'search', component: SearchListComponent,
data: { title: 'Search'}
},
];
In my menu-bar I have reduced the code to the following:
<div class="container">
<a routerLinkActive="is-active"
routerLink="/login">Login</a> |
<a routerLinkActive="is-active"
routerLink="/search">MySearch</a> |
<a routerLinkActive="is-active"
routerLink="/home">MyHome</a> |
</div>
<div >
<div *ngFor="let route of router.config">
<a routerLinkActive="is-active"
[routerLink]="userName? ('/'+route.path ): '/' ">{{route.data.title}}... {{userName? ('/'+route.path ): '/' }} </a> |
</div>
</div>
which includes my routes twice - nearly identical - except that the second code generates the items dynamically. The first one selects the items properly after a refresh while the second one fails.
According to the docu routerLink can be used as string
Anybody could explain me why the second one fails?
EDIT: As requested a picuture
but the content remains the same after I have chosen another link! Than all links are rendered properly!
EDIT2
I was able to reproduce the error. Main issue is that the evaluation of the routerlink was done too late and I run into the same issue like on the already reported bug.
My current workaround solution: initially set the userName :-/
