角度4で選択したメニューを強調表示する方法

Question

選択したメニューを強調表示しようとしていますが、アイデアを得ることができません。

以下のコードはサブメニュー付きのメニューです。メニューはJSONに由来しています。

HTML

<div *ngFor="let values of val"> 
    <mat-expansion-panel class="mat-ripple" mat-button routerLink="."> 
     <mat-expansion-panel-header expandedHeight="48px" collapsedHeight="48px"> 
      <mat-panel-title> 
       <md-icon class="mat-icon mat-list-icon material-icons"> 
        {{values.titleImage}} 
       </md-icon> 
       <div class="menu-list-text"> 
        {{values.titleName}} 
       </div> 
      </mat-panel-title> 
     </mat-expansion-panel-header> 
     <a class="sidenav-link mat-list-item mat-ripple" 
      mat-button 
      routerLink="." 
      *ngFor="let subTitleVal of values.subTitle"> 
      <div class="mat-list-item-content"> 
       <span md-line="">{{subTitleVal.titleName}}</span> 
      </div> 
     </a> 
    </mat-expansion-panel> 
</div> 

JSON、ユーザが特定のサブメニューを選択したときにクラスを追加する方法

val: any; 
val = [{ 
    'titleKey': 'AAA', 
    'titleName': ' Menu1', 
    'titleImage': 'Icon1', 
    'subTitle': [{ 
     'titleKey': 'AAA', 
     'titleName': 'SubMenu1', 
     'action': 'ACC', 
    }] 
}, { 
    'titleKey': 'BBB', 
    'titleName': 'Menu2', 
    'titleImage': 'Icon2', 
    'subTitle': [{ 
     'titleKey': 'BBB', 
     'titleName': 'SubMenu2', 
     'action': 'FT', 
    }] 
}, { 
    'titleKey': 'CCC', 
    'titleName': 'Menu3', 
    'titleImage': 'Icon3', 
    'subTitle': [{ 
     'titleKey': 'CCC', 
     'titleName': 'SubMenu3', 
     'action': 'BP', 
    }] 
}]; 

？

Answer 1

ようaddClassとremoveClassを実装します。

import { Renderer2, ElementRef } from '@angular/core'; 

export class changeStyleClass { 

    constructor(private renderer: Renderer2, private el: ElementRef) { 
    } 

    addClass(element: any, className: string) { 
    this.renderer.addClass(element, className); 
    // or use the host element directly 
    // this.renderer.addClass(this.el.nativeElement, className); 
    } 

    removeClass(className: string, element: any) { 
    this.renderer.removeClass(element, className); 
    } 

} 

デモ：https://plnkr.co/edit/BpeYpqf378MYDLWRGbjc?p=preview

Answer 2

あなたが選択した経路に対応するリンクに使用するCSSクラスを指定するa要素にrouterLinkActive属性を使用することができます。