关闭页面导航时更改仿真 - angular javascript

Question

我在一个特定页面上的 component.ts 文件中有以下代码，因为该页面在打印页面时需要使用它自己的 css：

@Component({
  selector: "dashboard",
  templateUrl: "./dashboard.component.html",
  styleUrls: ["./dashboard.component.scss"],
  encapsulation: ViewEncapsulation.None
})

但是，当我离开该页面时，我希望对 go 的封装在其他任何地方恢复正常。 有没有办法做到这一点？

或者有没有办法只在单击打印按钮时设置封装？ 然后关闭后又恢复正常？

如果我离开此页面并刷新，则其他页面 go 恢复正常，但我不想刷新。

编辑

我必须添加封装，以便使用 scss 文件中的此代码让页面打印横向：

@media print {
    @page {
      size: landscape 
    }
    .no-print,
    .no-print * {
      display: none !important;
    }
    body {
      -webkit-print-color-adjust: exact;
    }
    canvas {
      max-width: 100%;
      height: auto;
    }
    .printClass {
      display: inline-block;
    }
  }

否则，它每次只会获取全局 scss 并打印肖像。

Answer 1

是的。 在此示例中，我们使用ngx-print 。 这是您可以在GitHub上看到的图书馆。 您不使用它，但它使用正确的方式并且非常简单。

npm install ngx-print

使用

 <!--
   1)- Add an ID here
 -->
<div id="print-section"> 
  <!--Your html stuff that you want to print-->
</div>

 <!--
   2)- Add the directive name in your button (ngxPrint),
   3)- Affect your ID to printSectionId
 -->
<button printSectionId="print-section" ngxPrint>print</button> 

您可以在 css 中进行设置。这是一个示例：

1. 当我不使用 [useExistingCss]="true" 应用 css 时，尝试打印时会出现布局下拉选项（纵向或横向）。
2. 我的 css 包含 @media print{@page {size: landscape}} 行，但它似乎被 ngx-print 忽略了。
3. 如果我使用 {size: landscape,important}。 它将横向打印。
4. 如果我使用 {size: auto,important}。 提供了布局选项。

这是它的核心：

public print(): void {
    let printContents, popupWin, styles = '', links = '';
    const baseTag = this.getElementTag('base');

    if(this.useExistingCss) {
      styles = this.getElementTag('style');
      links = this.getElementTag('link');
    }

    printContents = this.getHtmlContents();
    popupWin = window.open("", "_blank", "top=0,left=0,height=auto,width=auto");
    popupWin.document.open();
    popupWin.document.write(`
      <html>
        <head>
          <title>${this.printTitle ? this.printTitle : ""}</title>
          ${baseTag}
          ${this.returnStyleValues()}
          ${this.returnStyleSheetLinkTags()}
          ${styles}
          ${links}
        </head>
        <body>
          ${printContents}
          <script defer>
            function triggerPrint(event) {
              window.removeEventListener('load', triggerPrint, false);
              ${this.previewOnly ? '' : `setTimeout(function() {
                closeWindow(window.print());
              }, ${this.printDelay});`}
            }
            function closeWindow(){
                window.close();
            }
            window.addEventListener('load', triggerPrint, false);
          </script>
        </body>
      </html>`);
    popupWin.document.close();