web-dev-qa-db-fra.com

Angular 5 - Sur la souris, entrez afficher un bouton et sur la souris laisser masquer un bouton

Lorsqu'un utilisateur survole un élément de la liste, je souhaite qu'un bouton s'affiche. Lorsque l'utilisateur quitte l'élément de liste, je souhaite que le bouton ne s'affiche pas.

J'ai rencontré un événement mouseenter et un mouseleave.

. html 

<mat-list-item (mouseenter)="enter($event)" (mouseleave)="leave($event)" class="chat-message-body" *ngIf="auth._id !== message.author._id" fxLayoutAlign=""
    dir="ltl">
    <div matLine>
        <b>{{message.author.profile.username}} </b>
        <span>{{message.created_at | date:'shortTime'}} </span>
    </div>
    <button mat-icon-button>
        <mat-icon aria-label="">keyboard_arrow_down</mat-icon>
    </button>
    <span matLine> {{message.body}} </span>
    <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
</mat-list-item>

. ts 

enter(e) {
    console.log("enter");
}

leave(e) {
    console.log("leave");
}

En plus de déclarer ces fonctions, je ne sais pas comment cibler le bouton dans cet élément de liste pour l'afficher et le masquer selon que l'utilisateur a entré le bloc d'élément de liste ou l'a quitté.

enter image description here

angularangular-material
8
Kay

J'ai créé une solution pour cela.

Quand un utilisateur "mouseenters" le bloc mat-item-list je mets une variable à true et ajoute un ng-if dans le bouton donc quand la variable est vraie, elle s'affiche et quand l'utilisateur "mouseleaves" de la liste mat-item-list la variable est définie sur false. Cela fonctionne bien en supposant que vous n'avez qu'une seule liste d'articles de tapis.

Ayant plusieurs moyens, j'ai besoin d'une variable pour stocker une valeur d'index lorsque l'utilisateur entre dans le bloc et je détermine si l'ensemble de valeurs d'index est le même que lorsque je survole. Si c'est le cas, le bouton sera affiché.

. html

<mat-list dense>
        <ng-template ngFor let-message [ngForOf]="conversation?.messages" let-i="index" let-odd="odd" [ngForTrackBy]="trackById">
            <mat-list-item (mouseenter)="enter(i)" (mouseleave)="leave(i)" class="chat-message-body" *ngIf="auth._id === message.author._id"
                fxLayoutAlign="" dir="rtl">
                <img matListAvatar class="img-box" src="http://via.placeholder.com/30x30" alt="...">
                <button mat-icon-button *ngIf="hoverIndex == i">
                    <mat-icon aria-label="">keyboard_arrow_down</mat-icon>
                </button>
                <div matLine>
                    <b>{{message.author.profile.username}} </b>
                    <span>{{message.created_at | date:'shortTime'}} </span>
                </div>
                <span matLine> {{message.body}} </span>
            </mat-list-item>
        </ng-template>
    </mat-list>

. ts

enter(i) {
    this.hoverIndex = i;
}

leave(i) {
    this.hoverIndex = null;
}

Cette solution semble plus propre que d'essayer de trouver un élément dom spécifique et d'y ajouter un affichage: bloc/aucun.

13
Kay