时间戳

首页 > 解决方案 > 如何在不使用路由的情况下更改鼠标悬停时的组件

angular - 如何在不使用路由的情况下更改鼠标悬停时的组件

问题描述

我想在不使用路由的情况下更改鼠标悬停时的组件。当我在文本组件上悬停时，然后调用文本组件，当我将鼠标悬停在按钮组件上时，调用按钮组件或隐藏文本组件。

标签： angular

解决方案

您可以在“鼠标悬停”事件上显示和隐藏组件。html:

<div class="tab">
  <div class="tablinks" (mouseover)="onMouseover(0)">text</div><br>
  <button class="tablinks" (mouseover)="onMouseover(1)">Button</button><br><br>
  <input type="radio" class="tablinks" (mouseover)="onMouseover(2)">Bulk Transmit
</div>
<div>
  <app-sports  *ngIf="tabIndex === 0"></app-sports>
  <app-movies  *ngIf="tabIndex === 2"></app-movies>
</div>

脚本

tabIndex = 2 ;

onMouseover(index){
  this.tabIndex = index;
}

在此处检查示例

推荐阅读