自动展开所有 PrimeNG Accordion 面板以进行打印

Question

我目前正在我的 Angular 项目中使用 PrimeNG 库的手风琴组件。请参阅此处的信息。

该模板包含一些用于打印页面的特殊 CSS 样式 - 如下所示：

 @media print {
  .profile-progress-bar, .top-template-header-content, .header.profile-header{
    display: none !important;
  }
  html, body {
    height: auto;
    font-size: 10px !important;
  }

  p-accordionTab > div {
    display: block !important;
    selected: true !important;
  }

}

我想做的是，在处理要打印的页面的渲染 accordionTab时自动展开所有元素。@media print

从文档中我看到每个accordionTab元素都有一个[selected]属性，可以绑定并设置为“true”以展开选项卡。

内容的选定可见性通过支持单向或双向绑定的选定属性来指定。

但是，这可以在@media print渲染发生时以某种方式自动触发吗？

谢谢！

Answer 1

媒体查询是可行的方法，您可以采用仅 CSS 的方法来实现此目的；TS 或 HTML 文件没有变化

相关CSS：

@media print {
  ::ng-deep .ui-accordion-content-wrapper-overflown {
      overflow: visible;
      height: auto !important;
  }
}

Stackblitz 上的完整演示请参见此处