Angular Меню материалов: меню открытия и закрытия не будет работать нормально - PullRequest
Новая
       19

Angular Меню материалов: меню открытия и закрытия не будет работать нормально

0 голосов
/ 31 марта 2020

Я создаю меню с angular материалом, и я обнаружил проблему при реализации функции закрытия меню: она не будет работать! подменю прекрасно работает при наведении мыши, но оно не закрывается! 

<div class="row">
  <div class="col-xl-12 widget-29">
    <div class="widget no-bg ">
      <div class="widget-body pt-0">
        <div id="services" class="owl-carousel ">

          <div [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger" (mouseover)="menuTrigger.openMenu()" class="item has-shadow">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.reclamations' | translate}}</div>
            </div>
            <img id="rec" class="img-fluid" src="assets/img/smarthome/plaint.png" alt="...">
          </div>

          <div [matMenuTriggerFor]="menuu" #menuTriggerr="matMenuTrigger" (mouseover)="menuTriggerr.openMenu()" class="item has-shadow" [routerLink]="['/propositions/all']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.propositions' | translate}}</div>
            </div>
            <img class="img-fluid" id="prop" src="assets/img/smarthome/feedback.png" alt="...">
          </div>

          <div [matMenuTriggerFor]="menuuu" #menuTriggerrr="matMenuTrigger" (mouseover)="menuTriggerrr.openMenu()" class="item has-shadow" [routerLink]="['/sondages/own']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.participations' | translate}}</div>
            </div>
            <img class="img-fluid" id="review" src="assets/img/smarthome/review.png" alt="...">
          </div>

          <div class="item has-shadow" [routerLink]="['/documents']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.documents' | translate}}</div>
            </div>
            <img class="img-fluid" src="assets/img/smarthome/file-search.png" alt="...">
          </div>

          <div class="item has-shadow" data-toggle="modal" data-target="#download">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.appmobiles' | translate}}</div>
            </div>
            <img class="img-fluid" id="mobile" src="assets/img/smarthome/smartphone.png" alt="...">
          </div>

          <div class="item has-shadow" [routerLink]="['/renseignement']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.renseignements' | translate}}</div>
            </div>
            <img class="img-fluid" id="faq" src="assets/img/smarthome/faq.png" alt="...">
          </div>

          <div class="item has-shadow" [routerLink]="['/members']">
            <div class="devices-item d-flex justify-content-center align-items-center">
              <div class="room">{{'menu.lacommune' | translate}}</div>
            </div>
            <img class="img-fluid" src="assets/img/smarthome/building.png" alt="...">
          </div>

        </div>
      </div>
    </div>
  </div>


  <mat-menu #menu="matMenu" class="dropdown" id="down" overlapTrigger="false">
    <span (mouseleave)="menuTrigger.closeMenu()">
      <button class="dropdown-item" [routerLink]="['/plaintes/new']">
        <span><i class="la la-plus-circle la-2x"></i> Nouvelle réclamation</span>
      </button>
      <button class="dropdown-item" [routerLink]="['/plaintes/all']">
        <span><i class="la la-eye la-2x"></i> Mes réclamations</span>
      </button>
    </span>
  </mat-menu>

  <mat-menu #menuu="matMenu" class="dropdown" id="down" overlapTrigger="false">
    <span (mouseleave)="menuTrigger.closeMenu()">
      <button class="dropdown-item" [routerLink]="['/plaintes/new']">
        <span><i class="la la-plus-circle la-2x"></i>Nouvelle proposition</span>
      </button>
      <button class="dropdown-item" [routerLink]="['/plaintes/all']">
        <span><i class="la la-eye la-2x"></i> Mes propositions</span>
      </button>
    </span>
  </mat-menu>

  <mat-menu #menuuu="matMenu" [overlapTrigger]="false" class="dropdown" id="down" overlapTrigger="false">
    <span (mouseleave)="menuTrigger.closeMenu()">
      <button class="dropdown-item" [routerLink]="['/plaintes/new']">
        <span><i class="la la-plus-circle la-2x"></i> participation</span>
      </button>
      <button class="dropdown-item" [routerLink]="['/sondages/own']">
        <span><i class="la la-eye la-2x"></i> mes participations</span>
      </button>
    </span>
  </mat-menu>


</div>

подменю остается открытым, пока я не нажму снаружи или в другом меню, может кто-нибудь взглянуть, я нахожу в чем проблема

...