リンクをクリックすると、角度

Question

アクティブ - 別のリンクを作り、私はこれらの要素とサイドバーがあります。

<ul class="nav nav-pills flex-column"> 
     <li class="nav-item collapsed side" data-toggle="collapse" data-target="#home" > 
      <a class="nav-link" routerLinkActive="active" routerLink="/home" [routerLinkActiveOptions]="{exact: true}">Home </a> </li> 
    <ul class="sub-menu collapse" id="home"> 

      <li class="nav-item list-unstyled"><a class="nav-link" routerLinkActive="active" routerLink="/home/submenu1">Submenu1</a></li> 
      <li class="nav-item list-unstyled"><a class="nav-link" routerLinkActive="active" routerLink="/home/submenu2">Submenu2</a></li> 

     </ul> 


     <li class="nav-item side"> 
      <a class="nav-link" routerLinkActive="active" routerLink="/contact">Contact</a> 
     </li> 

    </ul> 

Submenu1をクリックすると、私はそれはCSSをとるようにホームをアクティブに設定したいです私はリンクがアクティブなときに申し込んだ。 Angular5でどうすればいいですか？ ありがとうございます。

Answer 1

ngClassを使用し、コンポーネントにはルートがホームルートの一部であるかどうかを確認するコードがあります。例：

let isHomeActive = Router.url.startsWith("/home/"); 
this.homeClasses = { 
    "active": isHomeActive, 
    "nav-link": true 
} 

<a [ngClass]="homeClasses" routerLinkActive="active" routerLink="/home" [routerLinkActiveOptions]="{exact: true}">Home </a> </li>