1

routerLinkActiveを使用してリンクがアクティブなときに、css のスタイルを設定し、クラスを追加したいと考えています。ブートストラップで試してみましたが、動作しますが、フロントエンド開発者からカスタム CSS を取得すると、ルート URL がrouteLinkと一致していても、アクティブであることを示すクラスが追加されません。

私は少しイライラしていて、何が悪いのかわかりません。ルートがアクティブな場合、アンカーにクラスmenu-activeが追加されると思います。

ここに私のコードがあります:

sidebar.component.html

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive="menu-active">
    <i class="ti ti-anchor"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

この質問から参照された、以下のコードのようにテストしました。routerlink がアクティブであるため、 iが表示されることを期待していますが、 http://localhost:4200/dashboardにいる場合でもアクティブではありません。

<li class="menu-parent">
  <a class="menu-item" routerLink="/dashboard" routerLinkActive #rla="routerLinkActive">
    <i class="ti ti-anchor" *ngIf="rla.isActive"></i>
    <span class="menu-text">Dashboard</span>
  </a>
</li>

誰かが私のフラストレーションを解消してくれることを願っています。ありがとうございました。

アップデート：

要素を検査しても、クラスは追加されません。そのスクリーンショットは次のとおりです。

4

2 に答える 2

0

私は解決策を見つけました。コンポーネントセレクターで*ngIfを使用しているため、 routerLinkActive が壊れました。ユーザーがログインした場合にナビゲーションバーを表示することになっていて、ナビゲーションバーはコンテンツのラッパーでもありました。そのため、ユーザーがログインしていない場合は *ngIf を使用してナビゲーションバーを非表示にしました。そこから問題が始まりました。私のナビゲーションバーにはサイドバーとトップバーが含まれており、コンポーネントセレクターに *ngIf を再度追加しないようにマージしました。

src/app/app.component.html

<app-navbar *ngIf="isLoggedIn; else loginpage"></app-navbar>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

私のコードのisLoggedInには、ユーザーがログインしているかどうかに関係なく、ブール値が含まれています。

解決策: すべてのルートでナビゲーション バーが読み込まれますが、ナビゲーション バーの div 内に*ngIf="isLoggedIn"を配置したため、ユーザーがログインしていない場合、サイドバーは表示されず、代わりにコンテンツのみが表示されます。

src/app/app.component.html

<app-navbar></app-navbar>

src/app/navbar/navbar.component.html

<div id="wrapper" [ngClass]="menu" *ngIf="isLoggedIn; else loginpage">
   <div class="side-menu" id="sidebar-wrapper" >
    // the sidebar HTML
   </div>
   <div class="wrapper-body">
       <div class="top-menu" >
        // the topbar HTML
       </div>

       <div class="content-wrapper">
          <div class="row main-content">
              <router-outlet></router-outlet>
          </div>
       </div>
    </div>
</div>

<ng-template #loginpage>
    <router-outlet></router-outlet>
</ng-template>

*ngIf をコンポーネント セレクターに入れると、アプリ開発に 2 ～ 3 日かかるとは思いもしませんでした。コンポーネントセレクターに構造ディレクティブを追加できないことをドキュメントで見つけたことはありません。ドキュメントでそれを見つけた人はいますか？助けてくれてありがとう！

于 2017-09-11T10:24:03.230 に答える