在 Angular 9 中，如果您在 URL 指向的 URL 上，如何更改导航 link 的 HTMl？

Question

对于我的 Angular 9 应用程序，我有一个简单的应用程序布局

<app-navbar></app-navbar>
<router-outlet></router-outlet>

导航栏组件看起来像

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <h1>My App</h1>
    <span class="menu-spacer"></span>
    <div>
      <a mat-button [routerLink]="'/'"> Home </a>
      <a mat-button [routerLink]="'/latest'"> Latest </a>
      <a mat-button [routerLink]="'/current'"> Items </a>
    </div>
  </mat-toolbar-row>
</mat-toolbar>

我想弄清楚 Angular 方法是什么，如果用户已经在该页面上，则将 link 更改为纯文本而不是锚点。如果 URL 与我要路由到的内容匹配，则抑制 link 生成并仅显示文本的正确方法是什么？

Answer 1

您可以通过订阅导航栏中的路由器事件来查看当前路线

class NavbarComponent {
  constructor(private router: Router) {
    router.events.subscribe((val) => {
        console.log(val) 
    });
  }
}

https://angular.io/api/router/RouterEvent

也许 ActivatedRoute 对您来说是更好的解决方案：

export class NavbarComponent {
  constructor(private activatedRoute: ActivatedRoute) {
    activatedRoute.queryParams.subscribe(
      params => console.log('queryParams', params));
  })
}

Answer 2

试试这个，我想这就是你想要做的。使用routerLinkActive指定自定义cssclassanchor-to-text

<a mat-button [routerLink]="'/'" routerLinkActive="anchor-to-text"> Home </a>

在您的导航栏组件 css 文件中编写我们自己的 css 以使锚标记看起来像纯文本

.anchor-to-text {
    cursor:text;
    color:inherit;
    text-decoration:none;
    pointer-events:none;
}

在 Angular 9 中，如果您在 URL 指向的 URL 上，如何更改导航 link 的 HTMl？

In Angular 9, how do you change the HTMl of a navigation link if you are on the URL it is pointing to?

angular

routes

navigation

angular9