使用Angular（2）routerLinkActive指令获取弯曲的路线

我已经有了这个工作，但我确定有更好的方法可以在Angular中执行此操作。基本上我有以下几种：使用Angular（2）routerLinkActive指令获取弯曲的路线

假设嵌套的，变形的路径，例如/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它工作正常。我只需添加另一个路由器链接？我应该添加其他指令吗？我需要去定制？

谢谢！

来源

2017-05-26 Tim Stackhouse

由于您的路由器是这样设置的; （假设标识是根后，即/logos）

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

这里只有两种类型的链接，您需要拥有：

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

链接到一个单一的标志： <a routerLink='/logo/specific-logo'>Specific Logo</a>，其中“特定标识”是您想要标识的标识的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); 
}

来源

2017-05-26 20:43:51

前者是我如何我的路线摆出来，这个问题是我想要的路由器链接激活'/标识的两种情况'和'/ logo /：id'，同时保留变形。我意识到使用儿童路线方法，或者甚至跳过变换路线名称将实现这一目的，但是变形是我所追求的。我意识到这很迂腐，但它有助于保持一致性，例如'/ logos'是一个标识列表，'/ logo /：id'是一个标识'/ logos /：id'的详细信息，但它与多对一关系不匹配。 –

Gotcha，我会尽量调整我的答案 –

谢谢。这就是我现在设置的东西，但是我遇到的问题仍然是当我看着'/ logo/'时，我的导航栏中的链接'routerLink ='/ logos''没有激活“routerLinkActive”指令，在我的示例中，该指令可以触发。我甚至尝试过使用我的Route上的'matcher'属性而不是'path'来尝试不同的变体，但是没有运气。 –

使用Angular（2）routerLinkActive指令获取弯曲的路线

回答

相关问题