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

【问题标题】：Expand all PrimeNG Accordion panels automatically for Printing自动展开所有 PrimeNG Accordion 面板以进行打印
【发布时间】：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 渲染发生时，这是否可以以某种方式自动触发？

谢谢！

【问题讨论】：

标签： css angular typescript media-queries primeng

【解决方案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 放在哪里，只需执行你的逻辑来让手风琴展开。

【讨论】：