javascript - 使用 Angular (2) routerLinkActive 指令进行变形路由

Question

我已经做到了这一点，但我确信在 Angular 中有更好的方法来做到这一点。基本上我有以下内容:

假设嵌套的、变形的路径，例如/logos 和 /logo/:id

我有以下有效的标记:

    <li class="nav-item">
        <a class="nav-link" routerLinkActive="active" links="logo" routerLink="logos">
            Logos
            <span routerLink="logo" hidden></span>
        </a>
    </li>

这将正确地导致选项卡在 /logo/:id 上激活，但是那里的跨度感觉确实很糟糕且不正确。如果路径没有变形，例如/logo 和 /logo/:id 或 /logos 和 /logos/:id 它工作正常。我只需添加另一个路由器链接吗？我应该添加一些其他指令吗？我需要定制吗？

谢谢!

Answer 1

因为你的路由器是这样设置的； (假设 Logo 位于根之后，即 /logos )

{
  path: 'logos',
  component: LogosComponent
},
{
  path: 'logo/:id',
  component: LogoComponent,
}

您只需拥有两种类型的链接:

链接到所有 Logo : <a routerLink='/logos'>All Logos</a>

链接到单个 Logo : <a routerLink='/logo/specific-logo'>Specific Logo</a> ，其中“specified-logo”是您要转到的 Logo 的 ID。

如果你想拥有/logos当您在 /logo/specific-logo 时看起来很活跃目录，我认为这是不可能的(除了您找到的解决方法)。但是，您可以使用计算值来模拟它，即:

<a class="nav-link" [class.active]="logoRouteActive" links="logo" routerLink="logos">
  Logos
</a>

import { Router } from '@angular/router';

// ...

constructor(private router: Router) { /** ... */ }

get logoRouteActive(): boolean {
  return this.router.isActive('/logo', false) || this.router.isActive('/logos', false);
}