Angular раскрывающееся меню материала не будет закрыто - PullRequest
Новая
       16

Angular раскрывающееся меню материала не будет закрыто

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

Я создаю компонент меню, используя angular материал, некоторые пункты меню имеют подменю, и я использую (mouseover) = "menuTrigger.openMenu ()" для откройте выпадающий список. 

<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 ">

          <a [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="...">
          </a>

          <a [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="...">
          </a>

          <a [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="...">
          </a>

          <a 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="...">
          </a>

          <a 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="...">
          </a>

          <a 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="...">
          </a>

          <a 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="...">
          </a>

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

  <mat-menu #menu="matMenu" class="dropdown" id="down">
    <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>
  </mat-menu>

  <mat-menu #menuu="matMenu" class="dropdown" id="down">
    <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>
  </mat-menu>

  <mat-menu #menuuu="matMenu" [overlapTrigger]="false" class="dropdown" id="down">
    <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>
  </mat-menu>

</div>

когда при наведении указателя мыши на элемент меню раскрывающийся список открывается, но после этого не будет закрыт !! даже я использовал (mouseleave) = "menuTrigger.closeMenu ()" подменю появляются и исчезают в одно и то же время !!!

...