Question

我需要创建一个打印服务，可以从整个应用程序的不同组件中调用该服务。服务方法接受两个参数，一个是需要编译和打印的组件，另一个是打印方向（纵向或横向）。

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

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

定义了有条件生成的两个不同的div元素（使用ngIf指令）。每个div都包含具有适当页面方向的<style></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>

在组件style / 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; } }')

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

1 个答案: