javascript - 将Angular(2)routerLinkActive指令用于变形路由

我已经完成了这项工作，但是我相信在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正常工作。我是否仅添加另一个路由器链接？我应该添加其他指令吗？我需要习惯吗？

谢谢！

最佳答案

由于您的路由器是这样设置的； （假设徽标位于根之后，即/logos）

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

您只需要两种类型的链接：

链接到所有徽标：
<a routerLink='/logos'>All Logos</a>

链接到单个徽标：
<a routerLink='/logo/specific-logo'>Specific Logo</a>，其中“ specific-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);
}

关于javascript - 将Angular(2)routerLinkActive指令用于变形路由，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44207056/