Angular 5 - 在鼠标进入时显示一个按钮，在鼠标离开时隐藏一个按钮 [英] Angular 5 - On mouse enter show a button and on mouse leave hide a button

问题描述

当用户将鼠标悬停在列表项上时，我希望显示一个按钮.当用户离开列表项时，我希望该按钮不显示.

我遇到了一个 mouseenter 事件和一个 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 |日期:'shortTime'}} </span>

<按钮垫图标按钮><mat-icon aria-label="">keyboard_arrow_down</mat-icon><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("进入");}离开(e){console.log("离开");}

除了声明这些函数之外，我不知道如何定位此列表项中的按钮以根据用户是否进入列表项块或离开来显示和隐藏它.

解决方案

我为此创建了一个解决方案.

当用户鼠标进入"mat-item-list 块时，我将一个变量设置为 true 并在按钮中添加一个 ng-if，以便当变量为 true 时它显示，当用户鼠标离开"mat-item-list 变量设置为false.假设您只有一个 mat-item-list，这可以正常工作.

有多个意味着我需要一个变量来在用户进入块时存储索引值，并且我确定索引值集是否与我悬停在上面的索引值相同.如果是，则会显示按钮.

.html

<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><div matLine><b>{{message.author.profile.username}} </b><span>{{message.created_at |日期:'shortTime'}} </span>

<span matLine>{{message.body}} </span></mat-list-item></ng-模板></mat-list>

.ts

enter(i) {this.hoverIndex = i;}离开(一){this.hoverIndex = null;}

这个解决方案似乎比试图找到一个特定的 dom 元素并添加一个 display:block/none 更简洁.

When a user hovers over a list item i want a button to be displayed. When the user leaves the list item i want the button to not be displayed.

I have come across a mouseenter event and a 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");
}

Apart from declaring these functions, i dont know how to target the button within this list item to show and hide it depending on if the user has entered the list-item block or left.

解决方案

I have created a solution for this.

When a user "mouseenters" the mat-item-list block i set a variable to true and add a ng-if in the button so when the variable is true it shows and when the user "mouseleaves" from the mat-item-list the variable is set to false. This works fine assuming you only have a single mat-item-list.

Having multiple means i need a variable to store an index value when the user enters the block and i determine if the index value set is the same one as im hovering over. If it is the button will be shown.

.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;
}

This solution seems more cleaner than trying to find a specific dom element and adding a display:block/none to it.

这篇关于Angular 5 - 在鼠标进入时显示一个按钮，在鼠标离开时隐藏一个按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！