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

Posted 2023-03-13

【中文标题】自动展开所有 PrimeNG Accordion 面板以进行打印

【英文标题】：Expand all PrimeNG Accordion panels automatically for Printing

【发布时间】：2019-10-14 14:27:45

【问题描述】：

我目前在我的 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”以展开选项卡。

选定内容的可见性是用选定的 支持单向或双向绑定的属性。

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

谢谢！

【参考方案1】：

媒体查询是要走的路，您可以采用仅css的方法来实现这一点； TS 或 HTML 文件没有变化

相关css：

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

完成demo on stackblitz here

【参考方案2】：

这是一个有趣的问题。要将其保留在 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 放在哪里，只需执行你的逻辑来让手风琴展开。