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

正如您的路由器设置如此; （假设徽标位于根之后，即/logos）

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

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

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

链接到单个徽标： <a routerLink='/logo/specific-logo'>Specific Logo</a>，其中＆＃34;具体标识＆＃34;是您要去的徽标的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);
}

对变形路径使用Angular（2）routerLinkActive指令

1 个答案: