角5 - マウスでボタンを表示してマウスを離したままボタンを非表示にする

Question

ユーザーがリスト項目の上を移動すると、ボタンが表示されます。ユーザーがリスト項目を離れると、ボタンは表示されません。

私は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 | 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"); 
} 

、私が表示され、応じて、それを隠すために、このリスト項目の中にボタンをターゲットにする方法を知りませんユーザーがリスト項目ブロックを入力したか、または残っている場合にオンになります。

Answer 1

私は、このためのソリューションを作成しました。

ボタンで変数が真であるので、ときに、ユーザー「mouseenters」私がtrueに変数を設定し、追加マット・アイテム・リストブロックNGの場合は、それを示しており、

時にマットからユーザー「mouseleaves」 -item-list変数がfalseに設定されています。これは、マット項目リストが1つしかないと仮定するとうまくいきます。

複数の手段を持つことは、ユーザーがブロックに入るときにインデックス値を格納する変数が必要で、インデックス値のセットがimのホバーオーバーと同じであるかどうかを判断します。そうであればボタンが表示されます。

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

このソリューションでは、特定のDOM要素を見つけようとして表示追加するよりもクリーンなようだ：それにブロック/なしを。