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

您可以在a元素上使用routerLinkActive属性来指定用于与所选路径对应的链接的css类。

如何以角度4

2 个答案: