Question

我正在实现一个工具栏，在该工具栏上悬停的每个路线（导航按钮）将显示一个类似于引导程序的弹出窗口，其中包含我发送的组件（类似于导航栏项目here）。

<div *ngFor="let route of toolbarRoutes">
  <button mat-stroked-button class="toolbar-nav-button" (click)="routeTo(route.path)">
    {{route.displayName}}
  </button>
  <app-hoverable *ngIf="route.component" [component]="route.component"></app-hoverable>
</div>

我的问题是，仅当按钮（app-hoverable）悬停时才想渲染/显示<button mat-stroked-button class="toolbar-nav-button" (click)="routeTo(route.path)">，我该怎么做？

Answer 1

就像这样（我具有堆叠的属性以提高可读性）：

<div *ngFor="let route of toolbarRoutes">
  <button mat-stroked-button
    class="toolbar-nav-button"
    (click)="routeTo(route.path)"
    (mouseenter)="route.showHoverable=true"
    (mouseleave)="route.showHoverable=false">

        {{route.displayName}}
  </button>

  <app-hoverable *ngIf="route.showHoverable" [component]="route.component"></app-hoverable>

</div>

如何以角度显示/隐藏按钮单击/悬停时的组件？

1 个答案: