Angular:如果 MatMenu 没有 MatMenuItem，则禁用 MatButton

Question

我有一个复杂的 MatMenu 和更多 MatMenuItem。每个 MatMenuItem 的可见性都基于一个条件。如果所有可能的条件都为假，则触发按钮将被禁用，例如:

<button mat-button [matMenuTriggerFor]="menu" [disable]="!condition1 && !condition2 && !condition3 && !conditionN">Menu</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item *ngIf="condition1">Item 1</button>
  <button mat-menu-item *ngIf="condition2">Item 2</button>
  <button mat-menu-item *ngIf="condition3">Item 3</button>
  ...
  <button mat-menu-item *ngIf="conditionN">Item N</button>
</mat-menu>

有一种简单的方法可以检查 MatMenu 是否至少有一个 MatMenuItem 并在没有可用的 MatMenuItem 时禁用触发按钮？

Answer 1

项目问题

正如前面的答案中提到的，一种潜在的解决方案可能是使用导出的 matMenu 的 items。

但是我们会遇到两个问题:

• items 属性为 deprecated ，并且可能很快就会被删除。

/**
 * List of the items inside of a menu.
 * @deprecated
 * @breaking-change 8.0.0
 */
items: QueryList<MatMenuItem>;

如果我们采用默认更改检测策略(而不是 OnPush)，则使用 matMenu.items.length 设置 disabled 属性将引发 NG0100 错误，因为更改检测过程是还没完。

潜在的解决方案

为了解决这个问题，我们可以创建一个可重用的指令，它将查询 MatMenu 的 MatMenuItem，然后触发一个具有菜单当前状态的事件:true 如果至少有一个选项，false 如果没有。

菜单切换.directive.ts:

@Directive({
  selector: 'mat-menu',
})
export class MenuToggledDirective implements AfterContentInit, OnDestroy {
  _destroyed$ = new Subject<void>();

  @ContentChildren(MatMenuItem, { descendants: true })
  _items!: QueryList<MatMenuItem>;

  @Output()
  menuToggled = new EventEmitter<boolean>();

  ngAfterContentInit(): void {
    this._items.changes
      .pipe(
        takeUntil(this._destroyed$),
        startWith(0),
        map((_) => this._items.length > 0)
      )
      .subscribe(this.menuToggled);
  }

  ngOnDestroy(): void {
    this._destroyed$.next();
    this._destroyed$.complete();
  }
}

app.component.html 中的用法:

<button #button mat-stroked-button [mat-menu-trigger-for]="menu">
  Menu
</button>
<mat-menu #menu="matMenu" (menuToggled)="button.disabled = !$event">
  <button mat-menu-item *ngIf="flag">Item 1</button>
  <button mat-menu-item *ngIf="false">Item 2</button>
</mat-menu>