1

当我重新加载/刷新我的应用程序时，会显示菜单栏中的路线，并且所有项目都设置为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：-/

4

1 回答 1

0

尝试添加[routerLinkActiveOptions]="{ exact: true }"到您生成的链接。默认情况下，Angular 路由器将匹配任何部分。

于 2018-12-13T15:40:22.963 回答