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

Question

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

有谁能帮助一下如何在鼠标悬停上实现这一点。

Answer 1

您可以使用activeindex属性和JavaScript的onmouseover事件。通过该事件，您可以设置公共类的属性，例如索引。

<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>

在您的类中，您需要索引作为全局属性。

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

看看这个StackBlitz。

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