Question

我正在尝试创建一个使用Angular Material mat-menu的自嵌套组件。我有一个flyoutcomponent是flyout-menu-item组件的包装器，它将有一个按钮作为嵌套组件的matMenuTrigger，它将显示与FeatureInput.FeatureChoices指示的多个级别。 FeatureInput是一个具有FeatureChoices的对象，可能包含或不包含其他特征选择等N级深度。下面的代码没有编译，但它应该演示我在做什么。基本上我有一个弹出菜单组件作为表单的输入，我试图在表单上加载存储的答案而不是选择新的，我可以使用嵌套组件轻松完成。期望的行为是，如果用户单击顶部matMenuTrigger按钮以打开顶部菜单，它将所有子菜单展开到与FeatureInput.FeatureValue匹配的菜单项，并将菜单项_highlighted设置为true。我正在使用menuOpen输入参数和ngChanges成功找到匹配（我的setTimeout不能正确）。基本上当我在console.log this.trigger时它是未定义的。理想情况下，在openMenu的ngOnChange中，我将浏览所有菜单并在所有触发器上调用openMenu，但我无法像文档所述那样使用ViewChild访问matMenuTrigger。我得到了不确定。 * - （欢迎所有帮助，谢谢。

这是弹出模板组件。

<div>
    <buttonmat-button [matMenuTriggerFor]="menu.childMenu" 
                                            (onMenuOpen)="onMenuOpen()" 
                                            (onMenuClose)="onMenuClose()">
      <span [innerHTML]="featureInput.Text"></span>
    </button>
    <app-flyout-menu-item #menu 
       [featureChoicesObject]="featureInput.FeatureChoices"></app-flyout-menu-item>
  </div>

这是它的.ts

import { Component, OnInit, Input, ViewChild } from '@angular/core';
import { MatMenuTrigger } from '@angular/material';


@Component({
  selector: 'app-flyout',
  templateUrl: './flyout.component.html',
  styleUrls: ['./flyout.component.scss']
})
export class FlyoutComponent implements OnInit {

  @Input() featureInput: FeatureInput

  constructor() { }

  ngOnInit() {
  }

  onMenuOpen() {
    this.menuOpen = true;
  }

  onMenuClose() {
    this.menuOpen = false;
  }
}

这是flyout-menu-item模板

<mat-menu #childMenu="matMenu" [overlapTrigger]="false">
    <span *ngFor="let featureChoice of featureChoices">
      <span>
        <button mat-menu-item [matMenuTriggerFor]="menu.childMenu">
          <span [innerHTML]="featureChoice.Text"></span>
        </button>
        <app-flyout-menu-item #menu 
                            [menuOpen]="menuOpen"
                            [featureInput]="featureInput" 
                            [featureChoicesObject]="featureChoice.FeatureChoices"
          (onOptionSelected)="someService.SomeMethod($event)"></app-flyout-menu-item>
      </span>
      <span *ngIf="!featureChoice.FeatureChoices">
        <button mat-menu-item (click)="selectOption(featureChoice.ID)" [innerHTML]="featureChoice.Text" value="{{featureChoice.ID}}"></button>
      </span>
    </span>
  </mat-menu>

这是它的.ts

import { Component, OnInit, Input, Output, ViewChild, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { MatMenuTrigger } from '@angular/material';


import { FeatureChoice } from 'app/model/feature-choice';
import { FeatureInput } from 'app/model/feature-input';

@Component({
  selector: 'app-flyout-menu-item',
  templateUrl: './flyout-menu-item.component.html',
  styleUrls: ['./flyout-menu-item.component.scss']
})
export class FlyoutMenuItemComponent implements OnInit{
  @ViewChild('menu') public menu;
  @ViewChild('childMenu') public childMenu;
  @ViewChild(MatMenuTrigger) public trigger: MatMenuTrigger;

  @Input() featureInput: FeatureInput;

  @Input() featureChoicesObject: FeatureChoice;
  @Output() onOptionSelected: EventEmitter<FeatureInput> = new EventEmitter<FeatureInput>();

  constructor(public solutionDataService: SolutionDataService) { }

  ngOnInit() {
    console.log(this.trigger);
  }

ngOnChanges(simpleChanges: SimpleChanges) {

    if (simpleChanges.menuOpen && simpleChanges.menuOpen.currentValue) {
      setTimeout(() => {
        // console.log(this.menu);
        const itemsArray = this.childMenu.items.toArray();
        for (let x = 0; x < itemsArray.length; x++) {
          const menuItem = itemsArray[x];
          if (this.featureInput.FeatureValue !== '' && menuItem._elementRef.nativeElement.value === this.featureInput.FeatureValue) {
            menuItem._highlighted = true;
          }
        }
      }, 1);
    }
  }

}

Answer 1

this.menuOpen = true;

也许在FlyoutComponent的顶部添加menuOpen: boolean = false作为属性。我不知道menuOpen的值保存在哪里。

Answer 2

menuOpen属性与matMenuTrigger有关。

这是一个例子：

<button [ngClass]="{'active-icon': trigger.menuOpen}" type="button" mat-
icon-button #trigger="matMenuTrigger"  [matMenuTriggerFor]="help">
    <mat-icon></mat-icon>
</button>
<mat-menu #help="matMenu">
    <div> textId </div>
</mat-menu>

使用matMenuTrigger openMenu

2 个答案: