Автоматическое развертывание всех панелей PrimeNG Accordion для печати
В настоящее время я использую компонент аккордеона библиотеки PrimeNG в своем угловом проекте. Смотрите информацию здесь.
Шаблон включает в себя некоторые специальные стили css для печати страницы — что-то вроде следующего:
@media print {
.profile-progress-bar, .top-template-header-content, .header.profile-header{
display: none !important;
}
html, body {
height: auto;
font-size: 10px !important;
}
p-accordionTab > div {
display: block !important;
selected: true !important;
}
}
То, что я пытаюсь сделать, это автоматически расширять все элементы accordionTab, когда рендеринг @media print обрабатывается для страницы, которая будет напечатана.
Из документации я вижу, что каждый элемент accordionTab имеет свойство [selected], к которому можно привязать и установить значение «true», чтобы развернуть вкладку.
Selected Visibility of the content is specified with the selected property that supports one or two-way binding.
Однако может ли это как-то автоматически запускаться, когда происходит рендеринг @media print?
Спасибо!
Ответы 2
Это интересно. Чтобы сохранить его в сфере Angular, вы можете использовать библиотеку @angular/cdk/layout и внедрить MediaMatcher. Вы также можете, конечно, сделать почти то же самое, используя JavaScript (см. здесь... метод cdk/layout, который я вам покажу, просто обертывает это).
У сервиса MediaMatcher есть метод matchMedia, и оттуда вы просто добавляете слушателя:
import { MediaMatcher } from '@angular/cdk/layout';
constructor(private readonly mediaMatcher: MediaMatcher ) { }
ngOnInit() {
mediaMatcher.matchMedia('print').addListener(e => e.matches ?
console.info('printing!') : null);
}
Итак, где я поставил console.info, просто выполните свою логику, чтобы аккордеоны расширились.
медиа-запрос - это путь, вы можете использовать подход только css для достижения этого; никаких изменений в файлах TS или HTML
соответствующий css:
@media print {
::ng-deep .ui-accordion-content-wrapper-overflown {
overflow: visible;
height: auto !important;
}
}
завершить демо на stackblitz здесь
