用于隐藏打印元素的 Angular 指令答案

【问题标题】：Angular directive for hiding an element for printing用于隐藏打印元素的 Angular 指令
【发布时间】：2018-11-01 17:41:30
【问题描述】：

我正在尝试使用 Angular 2 向 web 应用程序添加打印功能。我希望某些元素和组件仅在打印时显示，而其他元素和组件仅在不打印时显示。

我相信这可以使用 CSS @media 查询来完成，但是使用 Angular 指令执行此操作可能更优雅。

我想做类似以下的事情

<div *appPrint="false" class="row">
  <div class="col">
    <app-navbar></app-navbar>
  </div>
  <div class="col">
    <app-print-page></app-print-page>
  </div>
</div>
<div *appPrint="true" class="row">
  <app-print-header></app-print-header>
</div>

这可能吗，还是我应该切换到媒体查询？

【问题讨论】：

老实说，我认为使用媒体查询可能会更简单。只需创建一个noprint CSS 类并将其添加到您不想打印的任何内容中

标签： angular angular2-directives

【解决方案1】：

我想出了这种情况，我以不同的方式解决了它。

向屏幕添加一个新按钮，单击该按钮将在下一个选项卡中加载一个新页面，该页面具有不同的视图和不同的小部件和数据。从那里开始打印。

将打印所需的所有信息带入正常页面加载可能会影响性能。在我的情况下，当用户以表格格式打印需要的真实数据时，普通页面会加载图表和小部件。

如果您只想隐藏现有页面中的少量信息，那么 @media query 将是最佳选择。

media="screen, print"

【讨论】：