动态嵌套 angular material 菜单

Question

请告诉我如何解决以下问题：我需要根据数据模型对象实现具有不同嵌套级别的动态创建菜单。目前，使用递归，我们设法创建了菜单，但是，直接为子菜单分配属性 [matMenuTriggerFor] 存在问题。问题是所有后续的子菜单实际上都指的是第一个，所以当你将鼠标悬停在任何子菜单上时，它会导致 "flip" 到原始菜单（图像上的示例：菜单，其中包括元素：设备，分机、队列、队列成员（带有子菜单元素））。因此，在几秒钟内，我看到了另一个子菜单框架（图像上的示例：子菜单分组列表），之后第一个变为活动状态。当然，也许我没有做对所有事情，所以我在这里转向。请帮帮我。谢谢大家

imenu-item.ts

export interface IMenuItem {
  name: string | string[];
  link: string;
  subItems: IMenuItem[];
}

动态-menu.service.ts

import {Inject, Injectable} from '@angular/core';
import {APP_CONFIG_ROUTES} from '../../../config/routes/app.config.routes';
import {IAppConfigRoutes} from '../../../config/routes/iapp.config.routes';
import {IMenuItem} from './imenu-item';
import {_} from '@biesbjerg/ngx-translate-extract/dist/utils/utils';

@Injectable({
  providedIn: 'root'
})
export class DynamicMenuService {
  private readonly appConfig: any;

  constructor(@Inject(APP_CONFIG_ROUTES) appConfig: IAppConfigRoutes) {
    this.appConfig = appConfig;
  }

  getMenuItems(): IMenuItem[] {
    return [
      {
        name: _('labels.device'),
        link: '/' + this.appConfig.routes.device,
        subItems: null
      },
      {
        name: _('labels.extension'),
        link: '/' + this.appConfig.routes.extension,
        subItems: null
      },
      {
        name: _('labels.queue'),
        link: '/' + this.appConfig.routes.queue,
        subItems: null
      },
      {
        name: _('labels.queueMember'),
        link: null,
        subItems: [{
          name: _('labels.fullList'),
          link: '/' + this.appConfig.routes.queueMember.all,
          subItems: null
        }, {
          name: _('labels.groupedList'),
          link: '/' + this.appConfig.routes.queueMember.grouped,
          subItems: [{
            name: 'subName',
            link: 'subLink',
            subItems: [{
              name: 'subSubName1',
              link: 'subSubLink1',
              subItems: null
            }, {
              name: 'subSubName2',
              link: 'subSubLink2',
              subItems: null
            }]
          }]
        }]
      }
    ];
  }
}

动态-menu.component.ts

import {Component, Input, OnInit} from '@angular/core';
import {IMenuItem} from './imenu-item';

@Component({
  selector: 'app-dynamic-menu',
  templateUrl: './dynamic-menu.component.html',
  styleUrls: ['./dynamic-menu.component.scss']
})
export class DynamicMenuComponent implements OnInit {
  dynamicMenuItemsData: IMenuItem[];

  constructor(private dynamicMenuService: DynamicMenuService) {
  }

  ngOnInit() {
   this.dynamicMenuItemsData = this.dynamicMenuService.getMenuItems();
  }
}

动态-menu.component.html

<div>
  <ng-container [ngTemplateOutlet]="recursiveListMenuItems"
                [ngTemplateOutletContext]="{$implicit: dynamicMenuItemsData}">
  </ng-container>
</div>

<ng-template #recursiveListMenuItems let-listMenuItems>
  <div *ngFor="let menuItem of listMenuItems">
    <ng-container [ngTemplateOutlet]="menuItem.subItems != null ? subMenuItem : simpleMenuItem"
                  [ngTemplateOutletContext]="{$implicit: menuItem}">
    </ng-container>
  </div>
</ng-template>

<ng-template #simpleMenuItem let-menuItemArg>
  <a class="mat-button"
     mat-menu-item
     routerLink="{{menuItemArg.link}}">
    <span>{{menuItemArg.name | translate}}</span>
  </a>
</ng-template>

<ng-template #subMenuItem let-menuItemArg>
  <a class="mat-button"
     mat-menu-item
     routerLink="{{menuItemArg.link}}"
     [matMenuTriggerFor]="subItemsMenu">
    <span>{{menuItemArg.name | translate}}</span>
    <mat-menu #subItemsMenu="matMenu"
              [overlapTrigger]="false">
      <ng-container [ngTemplateOutlet]="recursiveListMenuItems"
                    [ngTemplateOutletContext]="{$implicit: menuItemArg.subItems}">
      </ng-container>
    </mat-menu>
  </a>
</ng-template>

Answer 1

结果，结果出来了，靠了好几个跟别人类似的问题。来自 HERE (dynamic nested menu example) and from HERE 的示例（mat-menu 的问题在打开时立即隐藏）帮助解决了这个问题（在最后一个示例中，只需将 zone.js 更新为 npm）

Answer 2

抱歉回答晚了，但也许您仍然会觉得它有用。
我写了一个名为 ng-action-outlet 的小库，在我看来它做得非常巧妙。

看起来像这样：

group: ActionGroup;

constructor(private actionOutlet: ActionOutletFactory) {
    this.group = this.actionOutlet.createGroup();

    this.group.createButton().setIcon('home').fire$.subscribe(this.callback);
    this.group.createButton().setIcon('settings').fire$.subscribe(this.callback);
}

<ng-container *actionOutlet="group"></ng-container>

演示：https://stackblitz.com/edit/ng-action-outlet-demo?file=src/app/app.component.ts

动态嵌套 angular material 菜单

Dynamically nested angular material menu

javascript

typescript

angular

angular-material-6