経路指定された経路のために角度（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

ルータは次のように設定されています。すべてのロゴに

リンク：単一のロゴに <a routerLink='/logos'>All Logos</a>

リンクあなたが持っている必要がリンクの唯一の2種類があります

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

（ロゴと仮定すると、すなわち/logos、ルートの後で） ： <a routerLink='/logo/specific-logo'>Specific Logo</a>ここで、「特定のロゴ」はあなたが行きたいロゴのIDです。

/logo/specific-logoディレクトリにいる間に/logosをアクティブに見せたい場合は、それが可能ではないと思います（回避方法を除いて）。前者は私が私のルートをレイアウトしている方法です、問題は、私は、ルータのリンクは `/ロゴの両方のケースのために有効にしたいです

<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); 
}