1

私はかなり単純なプロジェクトに取り組んでいますが、この問題には困惑しています!

routerLinkActive がアクティブにならないという 1 つの小さな問題を除いて、ルーティングをセットアップし、正常に動作しています。

まだ質問に画像を埋め込むことはできません。リンクをクリックして、得られた結果を確認してください。

ルーティング結果

http://localhost:4200/1に移動すると、「1」メニュー項目がナビゲーション バーでアクティブとして正しく表示されます。その後、子ルートhttp://localhost:4200/1/top100に移動すると、「1」メニューは引き続きアクティブに設定されたままになります。これはまさに私がそれを機能させたい方法です。

ただし、非常によく似た設定で、「4」メニュー項目をhttp://localhost:4200/2/Aに移動します。これにより、上部のナビゲーション バーの「4」がアクティブであり、「Test A」ボタンがアクティブであることが正しく表示されます。しかし、http://localhost:4200/2/Bに移動すると、「Test B」ボタンはアクティブとして正しく表示されますが、メイン ナビゲーション バーは「4」のアクティブ フラグを失いました。

以下にコード スニペットを添付します。

ナビゲーション バー

<ul class="navbar-nav">
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/1">1</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/notUsed', 'notUsed']">2</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/notUsed', 'notUsed']">3</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" [routerLink]="['/2', 'A']">4</a>
  </li>
  <li class="nav-item" routerLinkActive="active">
    <a class="nav-link" routerLink="/notUsed">5</a>
  </li>
</ul>

ボタングループ

<div class="btn-group-vertical fixedWidthButtonHonour mb-3" role="group" aria-label="Senior Grades">
  <button type="button" class="btn btn btn-outline-danger" [routerLink]="['/2', 'A']" routerLinkActive="active">Test A</button>
  <button type="button" class="btn btn btn-outline-danger" [routerLink]="['/2', 'B']" routerLinkActive="active">Test B</button>
</div>

ルート

const appRoutes: Routes = [
  { path: '', component: HomeComponent, pathMatch: 'full' },
  { path: '1', component: Component1 },
  { path: '1/top100/:name', component: ComponentTop100 },
  { path: '2', component: Component2 },
  { path: '2/:viewType', component: Component2 },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];

2 つの例の違いがわかりません。私が求めているものを達成するための洞察や実用的なデモを誰かが持っていれば、素晴らしいことです。

ありがとうデビッド

4

1 に答える 1