Mam dwie ikony materiałów kątowych w jednym komponencie, każda z menu - na przykład menu1 i menu2 . Kiedy kliknę ikonę menu1 , otworzy się lista menu1 . Następnie, kiedy klikam ikonę menu2 , muszę zamknąć listę menu1 i otworzyć menu2 . Ale teraz muszę zrobić dwa kliknięcia, aby wykonać tę czynność. Pierwsze kliknięcie zamyka menu1 , a dopiero drugie kliknięcie otwiera menu2 . Jak mogę zaimplementować otwieranie drugiego menu jednym kliknięciem za pomocą mat-menu?

Menu1 html

<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Example icon-button with a menu">
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu1="matMenu">
  <button mat-menu-item>
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
</mat-menu>

Menu2 html

<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu2="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
    </mat-menu>

Przykład przedstawia próbkę materiału kątowego. Moje pytanie brzmi jak otwierać i zamykać menu w jednym krótkim?

2
Rijo 19 grudzień 2019, 15:00

1 odpowiedź

Menu1 html

<button mat-icon-button [matMenuTriggerFor]="menu1" aria-label="Example icon-button with a menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu (closed)="menuOneClosed()" #menu1="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
    </mat-menu>

Menu2 html

<button mat-icon-button [matMenuTriggerFor]="menu2" aria-label="Example icon-button with a menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu2="matMenu">
      <button mat-menu-item>
        <mat-icon>dialpad</mat-icon>
        <span>Redial</span>
      </button>
    </mat-menu>

Instancja komponentu

@ViewChild(MatMenuTrigger) menu2: MatMenuTrigger;

menuOneClosed(){
    this.meu2.openMenu();
}
0
vcode 19 grudzień 2019, 15:52
Cześć Bro, dzięki za odpowiedź, w Twojej odpowiedzi, gdy klikniemy na menu1, menu2 otworzy się, prawda? nie chcę takiego zachowania. menu2 powinno być otwarte, gdy klikniemy na menu2 i odwrotnie, jednym kliknięciem.
 – 
Rijo
19 grudzień 2019, 17:27