web-dev-qa-db-ja.com

Angular 5 Material複数のmat-menu

私はAngular 5にかなり慣れており、学習を始めたばかりです。

最近、Angular 5 Material。を使用して、アプリの複数のメニューを含むメニューバーを作成しようとしています。
メニューは、マウス入力中にトリガー/オープンされ、マウスがメニューを離れるとクローズされます。
私の問題は、マウスマウスが最初のメニューに移動するたびに、2番目のメニューのメニュー項目をロードすることです。

問題のスクリーンショットを次に示します。
enter image description here

ここに私のコードがあります：
mainmenu.component.html：

_<div>
    <button mat-button [matMenuTriggerFor]="menu1" 
      (mouseenter)="openMyMenu()">Trigger1</button>
    <mat-menu #menu1="matMenu" overlapTrigger="false">
        <span (mouseleave)="closeMyMenu()">
            <button mat-menu-item>Item 1</button>
            <button mat-menu-item>Item 2</button>
        </span>
   </mat-menu>
</div>
<div>
    <button mat-button [matMenuTriggerFor]="menu2"
      (mouseenter)="openMyMenu()">Trigger2</button>
    <mat-menu #menu2="matMenu" overlapTrigger="false">
        <span (mouseleave)="closeMyMenu()">
            <button mat-menu-item>Item 3</button>
            <button mat-menu-item>Item 4</button>
        </span>
    </mat-menu>
</div>
_



mainmenu.component.ts：

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

@Component({
  selector: 'app-mainmenu',
  templateUrl: './mainmenu.component.html',
  styleUrls: ['./mainmenu.component.css']
})
export class MainmenuComponent implements OnInit {
  @ViewChild(MatMenuTrigger) matMenuTrigger: MatMenuTrigger;

  constructor() { }

  ngOnInit() {
  }
  openMyMenu() {
    this.matMenuTrigger.openMenu();

  } 
  closeMyMenu() {
    this.matMenuTrigger.closeMenu();
  }
}
_

私もこれを試しました：@ViewChild('menu1') matMenuTrigger: MatMenuTrigger;ですが、エラーが発生しています。
あなたの意見やアドバイスは大歓迎です！


ありがとう、
アルタニス・ゼラトゥル

参照：


javascriptangularangular5angular-material-5
5
Artanis Zeratul

同じ問題がありました。

2つの個別のコンポーネントを作成します。各コンポーネントには独自のマットメニューが含まれ、他のコンポーネントには影響しません。

<!-- component1 -->
<div>
 <button mat-button [matMenuTriggerFor]="menu1" 
  (mouseenter)="openMyMenu()">Trigger1</button>
 <mat-menu #menu1="matMenu" overlapTrigger="false">
    <span (mouseleave)="closeMyMenu()">
        <button mat-menu-item>Item 1</button>
        <button mat-menu-item>Item 2</button>
    </span>
</mat-menu>
</div>

<!-- component2 -->
<div>
<button mat-button [matMenuTriggerFor]="menu2"
  (mouseenter)="openMyMenu()">Trigger2</button>
<mat-menu #menu2="matMenu" overlapTrigger="false">
    <span (mouseleave)="closeMyMenu()">
        <button mat-menu-item>Item 3</button>
        <button mat-menu-item>Item 4</button>
    </span>
 </mat-menu>
</div>
8
non_tech_guy

この問題の正しい解決策：

@ViewChildren(MatMenuTrigger) trigger: QueryList<MatMenuTrigger>;

//And call:

me.trigger.toArray()[indexOfMenu].openMenu();
8
László Leber

ツールバーに2つのmatmenuがあり、それぞれが別個のコンポーネントであり、別個のmatmenuをトリガーします。

以下の画像を参照してください：

enter image description here

通知コンポーネント（上の画像のコンポーネント1）がエディタービューにあります。

enter image description here

Notification.component.htmlファイルで：

<button mat-icon-button [matMenuTriggerFor]="notificationsMenu" (mouseover)="openNotifications()">
  <mat-icon class="material-icons ele-text-color-grey">notifications</mat-icon>
</button>

<mat-menu #notificationsMenu="matMenu" [overlapTrigger]="false"></mat-menu>

2つのコンポーネントを1つにまとめることは不可能だと思いますが、これが役立つことを願っています。

2
non_tech_guy
<ul class="navbar-nav ml-auto">
  <li class="nav-item dropdown">
      <button mat-button [matMenuTriggerFor]="admin">ADMIN</button>
      <mat-menu #admin="matMenu">
        <button mat-menu-item>User Management</button>
      </mat-menu>
  </li>
  <li class="nav-item dropdown">
      <button mat-button [matMenuTriggerFor]="profile">PROFILE</button>
      <mat-menu #profile="matMenu">
        <button mat-menu-item>Change Password</button>
        <button mat-menu-item>Logout</button>
      </mat-menu>
  </li>
0
Madhukar Kumbhar