自动扩展所有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;
  }

}

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

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

  

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

但是，当@media print呈现时，是否可以通过某种方式自动触发？

谢谢！

Answer 1

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

相关的 css ：

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

完成demo on stackblitz here

Answer 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放在哪里，只需执行您的逻辑即可使手风琴扩展。