检查Angular中是否处于“模式”可见打印或隐藏打印答案

【问题标题】：Check if in "mode" visible-print or hidden-print in Angular检查Angular中是否处于“模式”可见打印或隐藏打印
【发布时间】：2019-05-06 20:42:58
【问题描述】：

我有类似的代码

<div class="row">
  <div class="col-sm-12 visible-print">
    Stuff (print in full width)
  </div>
  <div class="col-sm-6 hidden-print">
    Stuff (same as above but only half width for screen)
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (I don't want to print)
  </div>
</div>

我正在寻找的是一个函数，如果可见打印返回 true，如果隐藏打印返回 false，以便我可以编写。示例中的代码将被视为伪代码

<div class="row">
  <div class="{{inPrintMode() ? 'col-sm-12' : 'col-sm-6'}}">
    Stuff (full width for paper, half for screen)
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (i don't want to print)
  </div>
</div>

这种功能存在吗？我使用引导程序和 Angular

说明： 我如何以一种方式为屏幕/监视器/显示设置页面样式，以及在页面打印在纸上时以另一种方式设置页面样式。我将 class="visible-print" 用于仅应出现在纸上的元素，将 class="hidden-print" 用于仅应出现在屏幕上的元素。没有这些标签的元素会出现在纸上和屏幕上。

我正在寻找如何编写一个函数，我在这个例子中调用了“inPrintMode()”，它检测用户是在屏幕上查看页面还是正在渲染页面以进行打印并返回一个布尔值。

这里讨论了可见打印和隐藏打印： Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

提前感谢您的帮助。

【问题讨论】：

感谢所有答案，但它不能回答我正在寻找的内容。我已经对我的问题进行了澄清。我希望我现在已经更好地解释了我的问题。我正在寻找一种以编程方式确定是否应呈现元素的方法。您可以将其解释为将“可见打印”和“隐藏打印”转换为真/假的一种方式。抱歉，英语不是我的母语，而且我有阅读障碍。

标签： javascript css angular typescript bootstrap-4

【解决方案1】：

[ngClass] 适合你的情况

<div class="row">
  <div [ngClass]="inPrintMode() == true ? 'col-sm-12' : 'col-sm-6'">
    Stuff (full width for paper, half for screen)
  </div>
  <div [ngClass]="col-sm-6 hidden-print">
    Other stuff (i don't want to print)
  </div>
</div>

【讨论】：

【解决方案2】：

当然有[ngClass]，你可以这样使用它：

<div class="row">
  <div [ngClass]="inPrintMode() ? 'class-a' : 'class-b'">
    Stuff (full width for paper, half for screen)
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (i don't want to print)
  </div>
</div>

这里有一个Working Sample StackBlitz 供您参考。

【讨论】：