Question

我正在尝试使用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>

这是否可行，还是应该切换到媒体查询？

Answer 1

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

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

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

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

media="screen, print"

Angular指令，用于隐藏要打印的元素

1 个答案: