PrimeNG，在鼠标悬停事件上打开手风琴

Question

我有一个 Angular 8 应用程序，我正在使用 PrimeNG 8。在我的一个组件中，我有多个手风琴，我想在鼠标悬停事件上打开手风琴。请在此处查看文档 https://www.primefaces.org/primeng/#/accordion。

任何人都可以帮助如何在鼠标悬停时实现这一点。

Answer 1

您可以使用 activeIndex 属性和 JavaScript 的 onmouseover 事件。通过事件，您可以设置 public class 的属性，例如指数.

<p-accordion [activeIndex]="index">
    <p-accordionTab header="Header 1" (mouseover)="index = 0">
        Content 1
    </p-accordionTab>
    <p-accordionTab header="Header 1" (mouseover)="index = 1">
        Content 1
    </p-accordionTab>
</p-accordion>

并且在您的 class 中，您需要将索引作为全局索引属性。

@Component({ ... })
export class XYComponent {
  index = 0;
}

看看这个stackblitz。

编辑：它实际上与 OnPush ChangeDetectionStrategy 一起工作。

PrimeNG，在鼠标悬停事件上打开手风琴

PrimeNG, Open accordion on Mouse hover event

primeng

angular