Html 带垫子列表项的手风琴菜单不工作

我在一个有很多模块和子模块的Angular 9 web上工作。问题是我需要实现一个菜单与模块和儿童使用手风琴结构。此外，我正在使用material desigin，我需要使用mat nav list、mat list item和a实现此功能。我不想使用mat expansion panel、ul、li解决方案，我需要一个用于mat list item的scss解决方案

下面是一个示例模板->

这张照片正是我想要做的

我在angular 4中得到了一个以前版本的模板，我试图使样式适应我的新应用程序，但出现了一些问题，样式不起作用。这是我得到的结果：

这方面的SCS相当大，无法使用stackblitz进行演示，因为很多东西都不起作用

但基本上，我使用3个不同的指令来放置类。在菜单链接中打开，我想知道是否有其他更简单的方法来使用mat nav list、mat list item和指令执行此类菜单

指令

手风琴指令

手风琴锚指令

HTML

SCSS

---

我的SCS需要在这里下载文件-->

尝试更改您的SCS。如果我理解正确，你只使用显示：块代替显示：Flex

首先，请考虑将代码复制和粘贴到问题本身中，而不是提供代码的屏幕截图，因为它可能不容易读取，或者可能无法为具有较差Internet连接的用户加载。其次，请考虑提供GITHUB GIST，而不是下载一个可疑的URL用于您的SCSS文件。@ EDRIC非常感谢您的反馈。我刚刚用你的建议更新了信息。你能在stackblitz中提供一个最小的可复制的例子吗？

import { Directive, OnInit, AfterViewInit, AfterContentChecked } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/operators';

import { AccordionLinkDirective } from './accordionlink.directive';
import { filter } from 'rxjs/operators';

@Directive({
  selector: '[appAccordion]',
})
export class AccordionDirective implements AfterContentChecked {

protected navlinks: Array<AccordionLinkDirective> = [];

closeOtherLinks(openLink: AccordionLinkDirective): void {
  this.navlinks.forEach((link: AccordionLinkDirective) => {
    if (link !== openLink) {
      link.open = false;
    }
  });
}

addLink(link: AccordionLinkDirective): void {
  this.navlinks.push(link);
}

removeGroup(link: AccordionLinkDirective): void {
  const index = this.navlinks.indexOf(link);
  if (index !== -1) {
    this.navlinks.splice(index, 1);
  }
}

checkOpenLinks() {
  this.navlinks.forEach((link: AccordionLinkDirective) => {
    if (link.group) {
      const routeUrl = this.router.url;
      const currentUrl = routeUrl.split('/');
      if (currentUrl.indexOf( link.group ) > 0) {
        link.open = true;
        this.closeOtherLinks(link);
      }
    }
  });
}

ngAfterContentChecked(): void {
  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(e => this.checkOpenLinks());
  // this.router.events.filter(event => event instanceof NavigationEnd).subscribe(e => this.checkOpenLinks());
}

constructor( private router: Router) {
  setTimeout(() => this.checkOpenLinks());
}
}

import { Directive, HostBinding, Inject, Input, OnInit, OnDestroy } from '@angular/core';
import { AccordionDirective } from './accordion.directive';

@Directive({
  selector: '[appAccordionLink]'
})
export class AccordionLinkDirective implements OnInit, OnDestroy {

  @Input() public group: any;

  @HostBinding('class.open')
  @Input()
  get open(): boolean {
    return this._open;
  }

  set open(value: boolean) {
    this._open = value;
    if (value) { this.nav.closeOtherLinks(this); }
  }

  // tslint:disable-next-line: variable-name
  protected _open: boolean;
  protected nav: AccordionDirective;

  constructor(@Inject(AccordionDirective) nav: AccordionDirective) {
    this.nav = nav;
  }

  ngOnInit(): any {
    this.nav.addLink(this);
  }

  ngOnDestroy(): any {
    this.nav.removeGroup(this);
  }

  toggle(): any {
    this.open = !this.open;
  }
}

  import { Directive, HostListener, Inject } from '@angular/core';
import { AccordionLinkDirective } from './accordionlink.directive';

@Directive({
  selector: '[appAccordionToggle]'
})
export class AccordionAnchorDirective {

  protected navlink: AccordionLinkDirective;

  constructor( @Inject(AccordionLinkDirective) navlink: AccordionLinkDirective) {
    this.navlink = navlink;
  }

  @HostListener('click', ['$event'])
  onClick(e: any) {
    this.navlink.toggle();
  }
}

<mat-sidenav-container class="app">
  <mat-sidenav mode="side" opened color="primary" class="sidenav dark sidebar-panel app-inner">
    <div fxLayout="row wrap" fxLayoutAlign="center center">
        <button mat-icon-button>
            <mat-icon class="material-icons-round">menu</mat-icon>
        </button>
    </div>

    <!-- MENU /////////////////////////////////////////////////////////////////// -->


    <mat-nav-list appAccordion class="navigation navlist" role="list">
        <mat-list-item appAccordionLink *ngFor="let menuitem of menu" [group]="menuitem.state" class="module-link" role="listitem">

            <!-- LINK  -->
            <a appAccordionToggle class="relative" [id]="menuitem.state" [routerLink]="['/', menuitem.state]"
                *ngIf="menuitem.type === 'link'">
                <mat-icon *ngIf="menuitem.iconType==='icon'" class="material-icons-round">{{ menuitem.icon }}
                </mat-icon>
                <mat-icon *ngIf="menuitem.iconType==='svg'"><svg class="svg-24" viewBox="0 0 24 24">
                        <path fill="currentColor" [attr.d]="menuitem.icon" /></svg></mat-icon>
                <span>{{ menuitem.name }}</span>
                <span fxFlex></span>
              </span>
            </a>

            <!-- SUB LINK  -->
            <a appAccordionToggle class="relative" [id]="menuitem.state" href="javascript:;"
                *ngIf="menuitem.type === 'sub'">
                <mat-icon *ngIf="menuitem.iconType==='icon'" class="material-icons-round">{{ menuitem.icon }}
                </mat-icon>
                <mat-icon *ngIf="menuitem.iconType==='svg'"><svg class="svg-24" viewBox="0 0 24 24">
                        <path fill="currentColor" [attr.d]="menuitem.icon" /></svg></mat-icon>
                <span>{{ menuitem.name}}</span>
                <span fxFlex></span>
                <span class="menu-badge mat-{{ badge.type }}" *ngFor="let badge of menuitem.badge">{{ badge.value }}</span>
                <mat-icon class="menu-caret">arrow_drop_down</mat-icon>
            </a>
            <mat-nav-list class="sub-menu" *ngIf="menuitem.type === 'sub'">
                <mat-list-item *ngFor="let childitem of menuitem.children" routerLinkActive="open">
                    <a [routerLink]="['/', childitem.state ]" class="relative">
                        <mat-icon *ngIf="childitem.iconType==='icon'" class="material-icons-round">
                            {{ childitem.icon }}</mat-icon>
                        <mat-icon *ngIf="childitem.iconType==='svg'"><svg class="svg-24" viewBox="0 0 24 24">
                                <path fill="currentColor" [attr.d]="childitem.icon" /></svg></mat-icon>
                        <span>{{ childitem.name }}</span>
                    </a>
                </mat-list-item>
            </mat-nav-list>

        </mat-list-item>
    </mat-nav-list>

</mat-sidenav>
<mat-sidenav-content>
    Content
</mat-sidenav-content>