自动展开所有 PrimeNG 手风琴面板以进行打印

Question

我目前在我的 angular 项目中使用 PrimeNG 库的手风琴组件。 See info here.

该模板包含一些用于打印页面的特殊 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;
  }

}

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

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

Selected Visibility of the content is specified with the selected property that supports one or two-way binding.

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

谢谢！

Answer 1

这很有趣。要将其保留在 Angular 的范围内，您可以使用 @angular/cdk/layout 库并注入 MediaMatcher。当然，您也可以使用 JavaScript 做几乎完全相同的事情（请参阅 here... 我将向您展示的 cdk/layout 方法实际上只是包装了它）。

MediaMatcher 服务有一个名为 matchMedia 的方法，您只需从那里添加一个侦听器：

import { MediaMatcher } from '@angular/cdk/layout';

constructor(private readonly mediaMatcher: MediaMatcher ) { }

ngOnInit() {
    mediaMatcher.matchMedia('print').addListener(e => e.matches ? 
    console.log('printing!') : null);
}

所以在我放置 console.log 的地方，只需执行您的逻辑即可让手风琴展开。

Answer 2

媒体查询是可行的方法，您可以采用 css 唯一的方法来实现； TS 或 HTML 个文件没有变化

相关css:

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

完成demo on stackblitz here