html - 如何在 Angular 应用程序中正确设置打印方向？

Question

我需要创建一个打印服务，它可以在我的应用程序中从不同的组件调用。服务方法接受两个参数，需要编译打印的组件和打印方向(Portrait or Landscape)。

一切正常，除了方向。要么未设置，要么坚持第二次应用的方向。我所说的二次应用方向的意思是，我有两个用于测试目的的按钮。每个按钮调用不同的组件并设置不同的方向。如果我按以下顺序单击按钮:纵向，然后是横向，无论之后我按什么，页面都会以横向打印，反之亦然。

到目前为止，我已经尝试了以下方法:

• 定义了两个不同的 div 元素有条件地生成(使用 ngIf 指令)。每个 div 包含 <style></style>具有适当页面方向的元素。 style元素未渲染，因此方向未更改

• 页面方向在组件的样式/stuleUrls 元数据中定义。如上所述，这会产生第二次应用方向的问题

• 使用 ComponentFactoryResolver 为动态创建的组件添加样式.页面样式未应用

组件是使用 ComponentFactoryResolver 动态生成的.为简单起见，我不会发布该代码。如果需要，我会发布它。

此 html 添加在 app.component.html 中:

<div class="print-section">
    <div *ngIf="printOrientation === orientationEnum.Landscape">
        <style>
            @media print {
                @page {
                    orientation: landscape !important;
                }
            }
        </style>
    </div>
    <div *ngIf="printOrientation === orientationEnum.Portrait">
        <style>
            @media print {
                @page {
                    orientation: portrait !important;
                }
            }
        </style>
    </div>
</div>

组件样式/styleUrls 元数据中添加了相同的代码。

我还尝试在创建组件后动态地向生成的组件添加类:

let element: HTMLElement = <HTMLElement>componentRef.location.nativeElement;
this.printTemp.layout === PrintLayoutEnum.Landscape ? element.classList.add('landscape-print') : element.classList.add('portrait-print');

这根本不会影响方向。

预期结果是适当改变方向。通过设置 style在 app.component.html ，或者在使用 ComponentFactoryResolver 呈现组件时动态应用.我更喜欢第二个选项，但任何一个都应该没问题。

Answer 1

我有狭隘的视野，我试图使解决方案过于复杂。我创建了一个带有 id 的 style 元素。在使用 ComponentFactoryResolver 创建组件期间，我只是附加了所需的样式:

let styleElement = document.getElementById('print-style');
styleElement.append('@media print { @page { size: A4 landscape; } }')