Dans le code ci-dessous, j'appelle sidenav.toggle à deux reprises. Une à div et à bouton. Mais le sidenav ne s'ouvre que lorsque div a cliqué. Le sidenav ne s'ouvre pas lorsque je clique sur le bouton.

Quelqu'un peut-il fournir une solution pour cela.

<mat-card-content> 
                <div (click)="sidenav.toggle()" class="vl" >
                <mat-sidenav-container>
                    <mat-sidenav #sidenav  mode="side">
                       ...
                    </mat-sidenav>
                    <mat-sidenav-content>
                     <button mat-icon-button (click)="sidenav.toggle()">
                        <i class="fa fa-arrow-circle-o-right"></i>
                      </button>
                    </mat-sidenav-content>
                  </div>
</mat-card-content>

Merci d'avance :)

S'il vous plait, j'ai besoin de votre aide avec ceci

0
codebuff 12 févr. 2020 à 15:13

1 réponse

Meilleure réponse

C'est parce que l'événement click remonte également au div, donc toggle() est appelé deux fois. Un pour l'écouteur de clic de bouton et l'écouteur de clic div. Vous devez utiliser .stopPropagation() pour éviter cela :

<mat-card-content> 
  <div (click)="sidenav.toggle()" class="vl" >
    <mat-sidenav-container>
      <mat-sidenav #sidenav mode="side"></mat-sidenav>
      <mat-sidenav-content>
        <button mat-icon-button (click)="$event.stopPropagation(); sidenav.toggle()">
          <i class="fa fa-arrow-circle-o-right"></i>
        </button>
      </mat-sidenav-content>
    </mat-sidenav-container>
  </div>
</mat-card-content>

Il est peut-être plus judicieux d'utiliser simplement une fonction dans votre composant, mais vous avez l'idée

1
Poul Kruijt 12 févr. 2020 à 12:38