Угловая директива для скрытия элемента для печати - PullRequest
Новая
       5

Угловая директива для скрытия элемента для печати

0 голосов
/ 01 ноября 2018

Я пытаюсь добавить функцию печати в веб-приложение, используя Angular 2. Мне бы хотелось, чтобы некоторые элементы и компоненты отображались только при печати, а другие - только при отсутствии печати. ​​

Я считаю, что это можно сделать с помощью запросов 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>

Возможно ли это, или я должен переключиться на медиа-запросы?

1 Ответ

0 голосов
/ 01 ноября 2018

Я придумал эту ситуацию, я решил ее по-другому.

  1. Добавьте новую кнопку на экран, нажмите на кнопку, новая страница будет загружена на следующей вкладке с другим видом с другим виджетом и данными. оттуда с печатью.

Приведение всей информации, необходимой для печати, к нормальной загрузке страницы может повлиять на производительность. в моем случае обычная страница загружается с графиками и виджетами, когда пользователь печатает реальные данные в табличном формате.

Если вы хотите скрыть лишь немного информации с существующей страницы, тогда @ media query будет лучшим вариантом. 

media="screen, print"
...