角度禁用导航栏导航，但保留“当前组件”指示器

Question

基本上，我有一个包含多个组件的应用程序，并在app.component中创建了一个导航栏，该导航栏使我可以浏览各个组件。由于某些限制和要求，我无法通过导航栏保持导航。每个组件都有按钮可浏览我的网站。但是，由于指示器（导航栏文本下方的行，该行显示当前处于活动状态），我仍然希望保留导航栏，并可能在将来再次使用导航栏。

即使我使用按钮切换组件，蓝线指示器也会变为右侧导航栏标签。因此，基本上我只需要删除单击文本的功能即可。

此处介绍了如何实现导航栏：

app.component.html：

<nav mat-tab-nav-bar mat-align-tabs="center">
    <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.link" routerLinkActive #rla="routerLinkActive"
        [active]="rla.isActive">
        {{link.label}}
    </a>
</nav>
<router-outlet></router-outlet>

app.component.ts：

import { Component } from '@angular/core';
import { Router} from '@angular/router';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Test';
  navLinks: any[];
  activeLinkIndex = -1; 
  constructor(private router: Router) {
      this.navLinks = [
          {
            label: 'A',
            link: 'a',
            index: 0
          }, {
            label: 'B',
            link: '/b',
            index: 1
          }
        ];
  }

  ngOnInit(): void {
    this.router.events.subscribe((res) => {
      this.activeLinkIndex = this.navLinks.indexOf(this.navLinks.find(tab => tab.link === '.' + this.router.url));
    });
  } 
}

我尝试从html中删除[routerLink] ='link.link'，但不幸的是，蓝线指示器缺少它们。有什么解决方案可以不做大的改动吗？