1

我有一个使用 Angular 8 构建的应用程序。Routerlinkactive一开始没有在动态生成的路由上激活，但是当我单击同一模块中的一些其他链接并返回时，它就可以工作了。routerLinkActive设置在 中，当基于url 参数UserComponent加载child() 时，它应该激活导航中的锚点。UserProfileComponent

在此处输入图像描述

我尝试了很多解决方案，例如使用模板变量

[routerLinkActive]="['']" [ngClass]="rla.isActive ? 'mat-accent' : 'mat-primary'" #rla="routerLinkActive" 或应用[routerLinkActiveOptions]="{exact:true}"，但没有一个是有帮助的。

这是我的 HTML 代码的最后一个版本。

<ul role="list"  class="list-horizontal">
  <li>
    <a class="mat-primary"
      routerLinkActive="mat-accent"
      [routerLink]="'/user/profile/' + profile?._id"
      mat-raised-button>Profile </a>
  </li>
  <li>
    <a class="mat-primary"
      [routerLink]="'/user/posts/'"
      [routerLinkActive]="['mat-accent']"
      mat-raised-button>Posts</a>
  </li>
  <li>
    <a class="mat-primary"
      [routerLink]="'/user/favorite-posts/'"
      [routerLinkActive]="['mat-accent']"
      mat-raised-button>Favourites</a>
  </li>
</ul>

我猜问题出在动态生成的路线中（基于用户ID），

例如http://my-domain/user/profile/5dd58c41409cccea2c9296f3，因为当我直接访问其他组件时，例如http://my-domain/user/posts然后routerLinkActive工作正常将active类设置为相应的链接。这就是我为当前模块配置路由的方式。

const routes: Routes = [{
    path: '',
    component: UserComponent,
    children: [
      {
        path: 'profile/:id',
        component: UserProfileComponent
      },
      {
        path: 'posts',
        component: UserPostsComponent
      },
      {
        path: 'favorite-posts',
        component: UserFavoritePostsComponent
      }
    ]
}];

任何提示表示赞赏。谢谢！

4

1 回答 1

0

我找到了另一种解决此问题的方法，因为我无法使用动态生成的参数显示活动路线。因此，我发布了我的答案，以便对其他人有所帮助。

我决定mat-accent在选定元素上设置（活动）类并从兄弟元素中删除该类。这个技巧是在ngClass指令的帮助下完成的。

这是我更新的 HTML。（routerLinkActive不再需要属性）

<ul role="list"  class="list-horizontal mb-15">
  <li>
    <a
      class="mat-primary"
      routerLinkActive="mat-accent"
      [routerLink]="'/user/profile/' + profile?._id"
      [ngClass]="{'mat-accent': selectedItem == 'profile'}"
      (click)="onSetActiveClass($event, 'profile')"
      mat-raised-button>Profile </a>
  </li>
  <li>
    <a
      class="mat-primary"
      [routerLink]="'/user/posts/' + profile?._id"
      [ngClass]="{'mat-accent': selectedItem == 'posts'}"
      (click)="onSetActiveClass($event, 'posts')"
      mat-raised-button>Posts</a>
  </li>
  <li>
    <a
      class="mat-primary"
      [routerLink]="'/user/favorite-posts/'"
      [ngClass]="{'mat-accent': selectedItem == 'favorite-posts'}"
      (click)="onSetActiveClass($event, 'favorite-posts')"
      mat-raised-button>Favourites</a>
  </li>
</ul>

在打字稿文件中：

ngOnInit() {
   this.onSetActiveClass(event, 'profile'); // pass the 'active' class on load
}

onSetActiveClass(event, newClass) {
        this.selectedItem = newClass;
}

这里是来源。祝你好运！:)

于 2019-12-15T18:44:21.410 回答