Question

我想在Angular中打开一个新选项卡，该选项卡根本没有任何功能。它只是显示数据供用户打印的选项卡。我的问题是在主应用程序中我调用了获取数据，但是当我打开新选项卡时，变量不保存主应用程序中的数据。变量将被重置，就好像它是Angular应用程序的新实例一样。

我通过执行以下操作来创建新标签：

window.open('#/print-report');

然后在我的应用程序模块中，上述路线打开PrintReportComponent：

{ path: 'print-report', component: PrintReportComponent},

但是在新选项卡中，应用程序启动时，程序中的每个变量都将重置为其默认值。如何将任何变量“保存”或“传递”到这个新标签页？

Answer 1

您可以尝试以下操作：

要打印报告：

  /**
   * Method is used to print report.
   * @param response - html response.
   */
  printReport(response) {

    let data = response;

    let Pagelink = "about:blank";

    let pwa = window.open(Pagelink, "_new");

    if (!pwa || pwa.closed || typeof pwa.closed == 'undefined') {

      alert('Pop-up!', 'Please disable your Pop-up blocker and try again.', 'warning');

    }

    pwa.document.open();

    pwa.document.write(data);

    pwa.print();

  }

要下载报告：

    /**
     * Method is use to download file.
     * @param data - Array Buffer data
     * @param type - type of the document.
     */
    downLoadFile(data: any, type: string) {
        var blob = new Blob([data], { type: type.toString() });
        var url = window.URL.createObjectURL(blob);
        window.open(url);
    }

Answer 2

尝试使用一项服务，该服务可让您获取数据，然后确保通过url中的id标识数据，然后可以在ngOnInit的新标签页组件中进行此操作：

this.activatedRoute.params.subscribe((param: any) => {
            this.functionThatGivesYouData(this.activatedRoute.snapshot.params.id);
        });

因此，现在您可以通过ID向相同的数据提出新请求。否则，您应该使用本地存储，如果您持有机密信息，则该存储不安全。

Answer 3

只需使用本地存储，如@trichetriche所述

角度：将变量传递给window.open（）;

3 个答案: