Routerlinkactive не работает с динамически сгенерированным маршрутом при загрузке страницы в Angular 8

У меня есть сборка приложения с Angular 8. Routerlinkactive не активируется на динамически сгенерированном маршруте в начале, но когда я нажимаю на некоторые другие ссылки в том же модуле и возвращаюсь, все работает. routerLinkActive устанавливается в UserComponent, и он должен активировать привязку в навигации, когда дочерний элемент (UserProfileComponent) загружается на основе параметров URL.

введите здесь описание изображения

Я пробовал много решений, таких как использование переменной шаблона, например

[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>

Я предполагаю, что проблема заключается в динамически сгенерированном маршруте (который основан на идентификаторе пользователя),

Например, 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
      }
    ]
}];

Любая подсказка приветствуется. Спасибо!


angular angular8 angular-routing angular-routerlink
person johannesMatevosyan    schedule 09.12.2019    source источник
comment
попробуйте определить userLink примерно так: [routerLink]="['user', 'profile', profile._id"   -  person akkonrad    schedule 09.12.2019
comment
на самом деле я пробовал эту опцию, но я думаю, что параметры URL-адреса обычно загружаются немного позже, поэтому запрос идет с нулевым значением в конце URL-адреса.   -  person johannesMatevosyan    schedule 09.12.2019
comment
да, это может быть так, поэтому вы можете добавить *ngIf к элементу li, чтобы проверить, что профиль погоды уже загружен?   -  person akkonrad    schedule 09.12.2019

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел другой способ решить эту проблему, так как не мог отобразить активный маршрут с динамически генерируемыми параметрами. Поэтому я публикую свой ответ, чтобы он мог помочь другим.

Я решил установить класс 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;
}

Вот источник. Удачи! :)

person johannesMatevosyan    schedule 15.12.2019