如何实现棱角分明的互斥可检查菜单项？

Question

我发现的所有示例都有带有标签或图标的按钮，并且标签作为菜单项。有没有一种简单的方法可以执行下面的示例（取自材料设计的page）？

我已经尝试过类似的方法，但是这样做似乎很麻烦。

TS

  icon1 = 'check'
  icon2 = undefined;

  onOptionClick(parameter : string) {
    if (parameter === 'option1') {
      this.icon1 = 'check';
      this.icon2 = undefined;
    }
    else {
      this.icon1 = undefined;
      this.icon2 = 'check';
    }
  }

HTML

  <button #option1 mat-menu-item (click)="onOptionClick('option1')">
    <mat-icon>{{icon1}}</mat-icon>
    <span>option1</span>
  </button>
  <button #option2 mat-menu-item (click)="onOptionClick('option2')">
    <mat-icon>{{icon2}}</mat-icon>
    <span>option2</span>
  </button>

Answer 1

我创建了一些关于如何实现此目标的StackBlitz。我基本上会使用MatButtonToggleGroup并对其进行一些自定义。将整个内容包装在一个自定义组件中，以使其可在您的应用程序中重复使用，然后完成：https://stackblitz.com/edit/angular-thkwnk

显然，这是一个相当有限的设计，您必须根据自己的需要进行扩展/调整。如果您需要与选项标签不同的值。