Angular 8 routerLinkActive с параметрами - PullRequest
Новая
       52

Angular 8 routerLinkActive с параметрами

0 голосов
/ 04 августа 2020

У меня есть две вкладки на боковой панели, одна для Open chats, одна для Closed chats. Когда я выбираю вкладку Open chats, она становится жирной. Когда я выбрал вкладку Closed chats, обе вкладки станут полужирными. Если я добавлю [routerLinkActiveOptions]="{ exact: true }" к тегу a из Open chats, это решит проблему, но откроет новую проблему. Когда я выбираю чат в компоненте Open chats, URL-адрес переключается на .com/messenger/{randomString} вкладка Open chats остается полужирной, что хорошо, но когда я обновляю sh страницу и URL-адрес, вкладка Open chats остается больше не жирный / активный. Как мне выполнить sh, сохранив одновременно messenger/complete и messenger, но при этом позволяя messenger и messenger/:id оставаться активными вместе.

Примечание: технически мне также нужны messenger/complete и messenger/complete/:id, чтобы вместе оставаться активными

sidebar html

      <a class="inboxLabel openChatsLabel" routerLink="/messenger" routerLinkActive="selectedLabel selectedOpen">
        <div></div>
        <p>Open Chats</p>
      </a>
      <a class="inboxLabel closedChatsLabel" routerLink="/messenger/complete"
        routerLinkActive="selectedLabel selectedClosed">
        <div></div>
        <p>Closed Chats</p>
      </a>

routing module

  {
    path: 'messenger',
    component: OverviewComponent,
    canActivate: [AuthGuard],
  },
  {
    path: 'messenger/:id',
    component: OverviewComponent,
  },
  {
    path: 'messenger/complete/:id',
    component: OverviewComponent,
  },

1 Ответ

0 голосов
/ 05 августа 2020

Хорошо, разобрался!

sidebar ts

import { Component, OnInit } from '@angular/core';
import { Router, Event, NavigationEnd } from '@angular/router';

@Component({
  selector: 'app-sidebar',
  templateUrl: './sidebar.component.html',
  styleUrls: ['./sidebar.component.css'],
})
export class SidebarComponent implements OnInit {
  completeTab: boolean;

  constructor(private router: Router) {}

  ngOnInit() {
    this.router.events.subscribe((event: Event) => {
      if (event instanceof NavigationEnd) {
        this.completeTab = event.url.includes('/complete') ? true : false;
      }
    });
  }
}

sidebar html

  <a class="inboxLabel openChatsLabel" routerLink="/messenger" routerLinkActive="selectedLabel selectedOpen"
        [ngClass]="{'selectedLabel': !this.completeTab, 'selectedOpen' : !this.completeTab}">
        <div></div>
        <p>Open Chats</p>
      </a>
      <a class="inboxLabel closedChatsLabel" routerLink="/messenger/complete"
        routerLinkActive="selectedLabel selectedClosed">
        <div></div>
        <p>Closed Chats</p>
      </a>
...