如何使用 Angular 中的路由器更改父页面中元素的显示

Question

我想动态更改父元素的@media打印样式，而不更改@media屏幕的这些相同元素的样式。

我有一个显示多个子组件的父页面。

<header>
   <title></title>
   <navigation></navigation> 
</header>
<main>
   <banner></banner>
   <router-outlet></router-outlet>
<main>

我想通过 @media print 在路由器部分的页面上显示报告，该打印隐藏页面上的所有其余元素 - 并仅显示报告。

我可以将以下内容添加到主 style.scss

[data-report="should-be-printed"]
@media print {
    body: not([[data-report="should-be-printed"], [data-report="should-be-printed"] *) {
       display: none;
    }
    [data-report="should-be-printed"] {
       display: block;
    }
}

虽然这实现了我想要的特定报告，但它隐藏了所有其他报告（通过路由器出口显示的页面）。

我需要的是一种修改样式的方法：该特定页面的报告中未显示的各种元素的显示设置（即通过javascript进行），但不影响其他报告及其打印预览功能。

我尝试将 id="header" 放入标题标签中，然后使用

const tempElement = document.getElementById('header');
tempElement.style.display = 'none';

识别各种元素并隐藏它们。然而，这也会影响屏幕部分。

最终目标是仅更改@media print 的样式。

Answer 1

您可以采取的一种方法是使用 CSS 媒体查询来定位打印样式，并使用 JavaScript 在打印期间要隐藏的元素上切换类。以下是如何实现此目标的示例：

• 在 CSS 文件中，为要在打印过程中隐藏的元素定义一个类：

  .隐藏打印{显示：无;}

• 将以下代码添加到您的组件中：

  界面窗口 { matchMedia(mediaQuery: string): MediaQueryList; }

   const hiddenElements: NodeListOf<HTMLElement> = document.querySelectorAll('.hide-on-print');
  
   const mediaQueryList = window.matchMedia('print');
   mediaQueryList.addEventListener('change', () => {
     if (mediaQueryList.matches) {
       hiddenElements.forEach((element) => {
         element.classList.add('hide-on-print');
       });
     } else {
       hiddenElements.forEach((element) => {
         element.classList.remove('hide-on-print');
       });
     }
   });
  

此代码选择具有 hide-on-print 类的所有元素，并向 matchMedia() 方法添加事件侦听器以侦听媒体查询中的更改。当媒体查询与打印样式匹配时，该类将添加到元素中，当不匹配时，该类将被删除。

• 在 HTML 中，将 class="hide-on-print" 属性添加到要在打印期间隐藏的元素：

<header class="hide-on-print">
  <!-- header contents -->
</header>
<main class="hide-on-print">
  <!-- main contents -->
</main>