Когда я перезагружаю/обновляю свое приложение, отображаются маршруты в строке меню, и для всех элементов установлено значение active. Я настроил маршруты:
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'}
},
];
В строке меню я сократил код до следующего:
<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>
который дважды включает мои маршруты - почти идентичные - за исключением того, что второй код генерирует элементы динамически. Первый правильно выбирает элементы после обновления, а второй терпит неудачу.
Согласно документу routerLink можно использовать как строку
Кто-нибудь может объяснить мне, почему второй терпит неудачу?
РЕДАКТИРОВАТЬ: По запросу изображение
но содержание остается прежним после того, как я выбрал другую ссылку! Чем все ссылки отображаются правильно!
ИЗМЕНИТЬ2
Мне удалось воспроизвести ошибку. Основная проблема заключается в том, что оценка routerlink была сделана слишком поздно, и я столкнулся с той же проблемой, что и с уже сообщил об ошибке.
Мое текущее обходное решение: изначально установите userName :-/
