Question

我有以下链接：

 <a routerLink="{{item._url}}" (click)="setActiveLink(i, item._url, menu)"
                [routerLinkActive]="['is-active']">Link</a>

如何扩展[routerLinkActive]到自定义URL以突出显示链接为活动状态？

我可以使用ngClass，但是如何获取与我的网址进行比较的网址？

我这样做了：

<a [ngClass]="{'is-active': isUrl()}" routerLink="{{item._url}}" (click)="setActiveLink(i, item._url, menu)"
                [routerLinkActive]="['is-active']">{{item.title | translate}}</a>

方法是：

public isUrl(): boolean {
    const currentUrl = this.router.url;
    const arrUrl = ['replacements'];

    for (let i = 0; i < arrUrl.length; i++) {
      return currentUrl.indexOf(arrUrl[i]) > -1;
    }

    return false;
  }

突出显示菜单中的所有链接

Answer 1

使用routerLinkActive="class-name"和routerLinkActiveOptions="{exact:true}"进行有效的路线链接吗？

.html文件

<nav>
    <div class="collapse navbar-collapse justify-content-end" id="nav-content">
        <ul class="navbar-nav" id="nav">
          <li class="nav-item">
            <a class="nav-link" routerLink="" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/experience" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Experience</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" routerLink="/skills" routerLinkActive="class-name" routerLinkActiveOptions="{exact:true}">Skills</a>
          </li>
        <ul>
     <div>
<nav>

css / .scss文件

.class-name{
    color:red;
    ...
}

如何在Angular中设置活动路线链接？

1 个答案: