Question

我有一个包含不同组织列表的嵌套菜单。当我选择任何一个嵌套组织时。相应的名称应显示在父菜单名称中。这是我的代码。

import {Component} from '@angular/core';
@Component({
  selector: 'nested-menu-example',
  templateUrl: 'nested-menu-example.html',
  styleUrls: ['nested-menu-example.css'],
})
export class NestedMenuExample {}

<button mat-button [matMenuTriggerFor]="organisation">Switch Org.</button>

<mat-menu #organisation="matMenu">
  <button mat-menu-item value="google-inc">Google Inc.</button>
  <button mat-menu-item value="Microsoft-corporation">Microsoft Corporation</button>
  <button mat-menu-item value="oath-inc">Oath Inc</button>

</mat-menu>

Answer 1

您可以使用MenuTrigger项的click事件，并将单击的菜单项的名称绑定到所需的任何位置。我在stackblitz上编辑了Angular Material的嵌套菜单示例。我将点击事件添加到仅“鸟”菜单项中，您可以将此事件与所有菜单项相乘。

请寻找我的追踪样本：https://stackblitz.com/edit/angular-xe6noh?file=app%2Fnested-menu-example.ts

选择任何嵌套菜单时，如何更改显示的名称？

1 个答案: