Question

我在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

Answer 1

这完全取决于您如何对选项卡进行分页-如果我假设您使用的是Angular Material之类的东西，则在需要显示它们之前，不会真正显示未显示的选项卡。同样，如果您在每个选项卡上使用路由器和插座，则在该插座处于活动状态（即需要显示）之前，Angular不会创建模板并进行绑定。

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

很难在不知道如何管理和呈现这些选项卡的情况下提供一个好的解决方案，但是您可以浏览打印中的每个选项卡，呈现其内容，通过CSS打印媒体查询将它们分开，然后进行打印。不过，对于用户而言，这看起来不太好，因此另一种解决方案是完全使用单独的页面-接受某种参数并在新页面上将每个选项卡呈现为 un -tabbed（全部放在一页上），然后打印该页面。

实现起来并不难-只需建立一个接受参数的路径，然后将每个选项卡组件放置在需要的位置即可。组件的更新将自动反映在该新路线上。

您还可以使用指令来抓取每个选项卡的Template，通过ComponentFactoryResolver用输入来呈现它，按需要组织内容并以这种方式打印。我知道解释很模糊，但是如果不了解您的应用程序，很难给出一个很好的答案。

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

1 个答案: