如何在Angular 4中一次打印多个标签？答案

【问题标题】：How to print multiple tabs in one shot in Angular 4?如何在Angular 4中一次打印多个标签？
【发布时间】：2018-09-28 16:36:57
【问题描述】：

我在 Angular 4 中有一个应用程序。屏幕上有 4 个选项卡（'tab1'、'tab2'、'tab3'、'tab4'）。每个选项卡都与一个动态加载的角度组件相关联。

当用户登陆着陆页时，默认显示'tab1'。有菜单控制，我们有一个打印按钮。单击此打印按钮后，我必须打印所有选项卡。

以下是我所做的。为所有动态加载的角度组件赋予“id”。使用 document.getElementByID('tab1').innerHtml 来获取 innet html。连接所有选项卡的所有 html。

点击打印按钮调用以下内容：- popupWin = window.open('', '_blank', 'width=' + screen.availWidth + ',height=' + screen.availHeight); popupWin.document.open(); popupWin.document.write(this.renderFullHtmlForPrintingReport(htmlStringToPrint)); [变量 'htmlStringToPrint' 包含所有选项卡中的所有 html。]

popupWin.document.close();

以下是渲染html打印的方法实现：-

renderFullHtmlForPrintingReport(printContents: string): string {
    return `
    <html>
    <head>
      <title>Print tab</title>
      <link rel="stylesheet" href="assets/bootstrap.css">
      <link rel="stylesheet" href="assets/site.css">
    </head>
    <body><div style="padding-left:10px">${printContents}</div></body>
  </html>`
  //<body onload="window.print();window.close();"><div style="padding-left:10px">${printContents}</div></body>
  }

标签代码：-

 <tabset>
      <tab *ngFor="let tab of tabs; let i = index" [heading]="tab.title" [active]="tab.active" (select)="tab.active = true" (deselect)="tab.active = false"
        [disabled]="tab.disabled" [sClass]="tab.sClass" id="{{i}}">
        <br>
        <dyna [type]="tab.tabContent" [language]="language" ></ddyna>
      </tab>
    </tabset>

是一个角度组件，其中组件是动态加载的。

以下是创建标签的方法：-

public tabs: ITab[] = [
    { title: 'B', tabContent: BComponent, templateNum: 0, sClass: "show-class", active: true },
    { title: 'O', tabContent: OComponent, templateNum: 1, sClass: "show-class", active: false },
    { title: 'P', tabContent: PComponent, templateNum: 2, sClass: "show-class", active: false },
    { title: 'BR', tabContent: BrComponent, templateNum: 3, sClass: "show-class", active: false },
    { title: 'FR', tabContent: FrComponent, templateNum: 4, sClass: "show-class", active: false }
  ];

当点击打印按钮时，一个新的对话框会显示 html，但 html 没有来自各种控件的绑定控件值。似乎正在显示角度组件的默认模板。

我可以使用 ViewChild 并使用共享服务缓存 html，但是对于页面上的每次更改，我都需要更新缓存。

解决方案的任何输入都会有所帮助。

最好的问候， AKing

【问题讨论】：

标签： angular

【解决方案1】：

这完全取决于您对标签页进行分页的方式——如果我假设您使用的是 Angular Material 之类的东西，那么在需要显示之前，未显示的标签页实际上不会被渲染。同样，如果您在每个选项卡上使用路由器和插座，Angular 将不会创建模板和绑定，直到该插座处于活动状态，即需要显示。

模板和组件绑定在组件创建之前不会被解析。有办法解决这个问题，但大多数都不是好的做法。 Angular 在将 DOM API 与您的代码分开方面也做了很多工作，因此很多时候试图解决这个问题会导致不可预知的结果。

如果不知道这些选项卡是如何管理和呈现的，很难给出一个好的解决方案，但是您可以在打印时浏览每个选项卡，呈现其内容，通过 CSS 打印媒体查询将它们分开，然后打印。不过这对用户来说看起来不太好，所以另一种解决方案是完全使用单独的页面——一个接受某种参数并将每个选项卡呈现在新页面上的 un-tabbed (全部在一个页面上），然后打印该页面。

实现起来并不难——只需创建一个接受参数的路由，然后将每个选项卡组件按您需要的方式排列即可。对组件的更新将自动反映在这条新路线上。

您还可以使用指令来获取每个选项卡的Template，通过ComponentFactoryResolver 使用输入渲染它，按照您的需要组织内容，然后以这种方式打印。模糊的解释，我知道，但如果不了解您的应用的更多信息，很难给出一个好的答案。

【讨论】：

我用更多代码更新了我的问题。我没有使用 Angular 材料。我们使用代码创建选项卡并使用选项卡动态加载组件。最后一个解决方案似乎很好，但没有足够的信息来实施。我会围绕它做更多的研发。