web-dev-qa-db-ja.com

Angular 6 routerLinkActiveが機能しない

Angular 6を使用してサイトを構築していますが、数日間問題が発生しています。アクティブなページに基づいてナビゲーションバーのテキストの色（リストアイテム）を変更しようとしています。 AngularJSとjavascriptを使用してこれを行う方法の例を見てきました。 https://angular.io/api/router/RouterLinkActive library for Angular 5+これは簡単な解決策のようですが、私にとってはうまくいきません。オンラインで見たさまざまな例を試してみましたが、どれもうまくいきませんでした。

header.component.html  
    <div class="navbar-collapse collapse navbar-nav pull-right" id="navbar">
<ul class="navbar-nav" style="align-items: center;">
  <li class="main-links" [routerLinkActive]="['active']">
    <a class="al" [routerLink]="['home']" id="home-button" href="home">Home</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/about" routerLinkActive="active" id="about-button" href="about">About</a>
  </li>
  <li class="main-links">
    <a class="al" id="blog-button" href="https://tspace.web.att.com/blogs/financelive/?lang=en_us" target="_blank">Blog</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/albums" routerLinkActive="active" id="albums-button" href="albums">Platinum Albums</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/programs" routerLinkActive="active" id="programs-button" href="programs">Development Programs</a>
  </li>
  <li class="main-links">
    <a class="al" routerLink="/contact" routerLinkActive="active" id="contact-button" href="contact">Contact Us</a>
  </li>
</ul>

これは、header.component.lessでのアクティブな宣言です。

    .active {
color: #009fdb;
font-family: font-bold;

}

[routerLinkActive]を角かっこで使用すると、ページはまったく読み込まれず、タグ内のrouterLinkおよびrouterLinkActiveを使用すると、まったく登録されません。不足しているインポートがあります。 @ angular/coreからrouter、routerlinkactive、およびrouterlinkをインポートしようとしました。

コード例では、routerLinkActiveを使用する両方の異なるスタイルを意図的に残しました。私が実際に実行したとき、それはこのようではありませんでした。

Angular 6、bootstrap 4.1.1、jquery 3、およびpopperjsがインストールされています。

さらに検討した結果、routerLinkActiveがルートアプリモジュール内の要素で正しく機能することを発見しました。 UiModuleというヘッダーとフッター用の新しいモジュールを作成しましたが、ヘッダー内で機能していません。 routerLinkActiveをこのモジュールで動作させる方法についてのアイデアはありますか？

htmlcssangularangular6routerlinkactive
5
R Shavers

RouterModuleをUiModuleにインポートしてみてください。app.module.tsファイルにインポートされたものを使用できません。

import { RouterModule } from '@angular/router';
// some other imports here

@NgModule({
  imports: [
    RouterModule
  ],
  exports: [
    // export UI components
  ],
  declarations: [
    // declare UI components
  ]
})

この問題が発生したとき、すべてを正しくインポートしました。問題がHTMLの構造に起因していると考えるまでに数日かかりました

<li class="nav-list">
  <a routerLinkActive="active" 
    [routerLinkActiveOptions]="{exact: true}"
    routerLink="/" 
    href="/">
    <i class="material-icons nav-link-icon">person</i>
    <span class="nav-link-text">Profile</span>
  </a>
</li>

問題は、私が.activeクラスは、li要素に常に表示されていたが、anchor要素に表示されます。それがあなたのケースで起こっていることではないことを確認してください。

10
Frank