Angular 8 路由器LinkActive 带参数

Question

我的侧边栏上有两个选项卡，一个用于Open chats ，一个用于Closed chats 。 当我 select Open chats选项卡时，它变为粗体。 当我选择Closed chats选项卡时，两个选项卡都变为粗体。 如果我将[routerLinkActiveOptions]="{ exact: true }"添加到Open chats a标签中，它可以解决问题，但会带来一个新问题。 When I select a chat within the Open chats component, the url switched to .com/messenger/{randomString} the Open chats tab stays bold which is good, but when I refresh the page and the url stays, the Open chats tab is no更长的粗体/活跃。 我将如何实现将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,
  },

Answer 1

好吧，想通了！

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>