javascript - 检查 Angular 中的 "mode"可见打印还是隐藏打印

Question

我有这样的代码

<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>

这种功能存在吗？我使用 bootstrap 和 Angular

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

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

visible-print 和 hidden-print 这里讲一下: Hide a div in a page and make it visible only on print bootstrap 3 MVC 5

在此先感谢您的帮助。

Answer 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>