Проверьте, находится ли в «режиме» видимая печать или скрытая печать в Angular

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, если visible-print, и false, если hidden-print, чтобы я мог писать.Код в примере должен рассматриваться как псевдокод

<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 (), которая определяет, просматривает ли пользователь информацию.страница без экрана или, если она отображается для печати, и возвращает логическое значение.

visible-print и hidden-print, о которых говорится здесь: Скрыть div на странице исделать его видимым только при печати начальной загрузки 3 MVC 5

Заранее благодарим за любую помощь.

Answer 1

Конечно, есть [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>

---

Вот Рабочий образецStackBlitz для вашей ссылки.

Answer 2

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

Answer 3

Попробуйте с [ngClass] (с правильным синтаксисом):

<div class="row">
  <div class="col-sm-12 visible-print" [ngClass]="{ 'visible-print': inPrintMode(), 'hidden-print': !inPrintMode() }">
    Stuff
  </div>
  <div class="col-sm-6 hidden-print">
    Other stuff (I don't want to print)
  </div>
</div>