html - angular 2 在鼠标进入和离开时显示和隐藏组件

Question

我已经为 Angular 2 中的过滤器创建了一个组件，并将其添加到表头中。我想在鼠标处于跨度上时显示，而在鼠标离开时我想隐藏

<th>
 <span class="headColor" >{{componentContents.dlHead}}</span>
  <app-data-filter [dataObject]="responseData" [filterBy]="'storeCatelogue'"
 (filteredArray)="filterByArray($event,'storeCatelogue')"></app-data-filter>
</th>
 <th >
  <span class="headColor">{{componentContents.titleHead}}</span>
  <app-data-filter [dataObject]="responseData" [filterBy]="'title'" 
  (filteredArray)="filterByArray($event,'title')" ></app-data-filter>
 </th>

但我想在鼠标悬停时显示此过滤器组件并在鼠标移开时隐藏，这不应该显示我想为该特定标题显示的所有应用程序数据过滤器组件。每个标题的过滤器都不同，所以我应该一次显示一个。我不知道主机监听器如何在这里使用它，因为我仍在学习 angular 2，所以如果我得到一些指导或有任何其他方式，这将非常有帮助

Answer 1

您可以使用 css :hover 选择器..

由于您没有指定 html 的确切结构，所以我很难说您应该如何实现它。

假设您想要显示桌面鼠标悬停，并且您的表格类是“我的表格”。

.my-table:hover{
  th{
    display:none;
    }
}

您可以阅读有关 :hover 选择器的信息 here .

编辑:

如果您的 html 结构类似于:

<span class='my-toggle-span'>Toggle app filter!</span>

<app-filter class='my-app-filter'></app-filter>

那么你的css就是

.my-toggle-span:hover +.my-app-filter{
display:none;
}

plus selector选择紧跟其后的所有元素。

编辑 2:根据开瓶器的要求，基于 javascript 的解决方案:我不推荐这种方法和任何方式，您的切换逻辑应该在您的组件中处理，而不是在您的 html 中处理。

<span class='my-toggle-span' (mouseenter)="toggle=true;"
 (mouseleave)="toggle=false;">Toggle app filter!</span>

<app-filter *ngIf="toggle" class='my-app-filter'></app-filter>