新选项卡中的角度打开组件，无需引导整个应用程序

编程问答 2022-06-07

问题描述

在我的Angular 10应用中，我想在新的浏览器标签中打开组件。我想做到这一点而无需引导整个应用程序并创建另一个应用程序实例。

我发现了文章Open Angular components dynamically in new browser tab without bootstrapping the whole app again准确地描述了我的需求。

但是有一些问题-它无法正常工作。在Chrome隐身模式下，它可以正常工作，但在正常模式下的Chrome中，或Firefox不起作用。它会在几毫秒内打开新标签页并自行关闭。在其他计算机上，它在Firefox中可以正常运行，但在Chrome中根本无法运行。

我的问题是，是否可以通过某种解决方案或黑客手段实现这一目标，并使其在任何或大多数浏览器中都能正常工作？我不想创建多个实例，因为要进行通信并保持一种状态的应用很困难。

解决方法

实际解决方案/检测

问题是弹出窗口阻止，这是一个常见的javascript问题，不仅与角度相关。一种解决方案是检测弹出窗口何时被阻止/关闭并通知用户。

我做了一个非常粗糙的实现。我修改了popout.services.ts文件，并添加了检测项以查看窗口是否打开和/或存在。

我添加了detectPopBlocker方法，该方法在调用初始window.open后2秒执行。请注意，原始代码要等待1秒钟才能将数据发送到新的窗口实例。

项目：https://stackblitz.com/edit/portal-simple-yyyffj?file=src/app/services/popout.service.ts 

openPopoutModal(data) {
    const windowInstance = this.openOnce(
      "assets/modal/popout.html","MODAL_POPOUT"
    );

    // Wait for window instance to be created
    setTimeout(() => {
      this.createCDKPortal(data,windowInstance);
    },1000);

    setTimeout(() => {
      this.detectPopupBlocker(windowInstance);
    },2000);
  }

   detectPopupBlocker(windowInstance) {
    if (
      !windowInstance ||
      windowInstance.closed ||
      typeof windowInstance.closed == "undefined"
    ) {
      alert(
        "This site relies on a new browser windows to diplsay data. It seems the windows has been closed." +
          "Please disable any pop-up blockers or other such software for  the specific site. "
      );
    }
  }

理论

问题不在于您的代码，而是与广告/弹出窗口阻止有关。

我在没有广告拦截的浏览器中尝试了该示例，并且效果很好。 我还在带有Adblock extension的Chrome浏览器中进行了尝试，并看到了您提到的行为（弹出窗口立即打开和关闭）。

它通知我一个广告被屏蔽。

enter image description here

因此，就像我在上面所做的那样，我实现了一个简单的弹出式窗口拦截器检测器（甚至可能基于简单的javascript），以便在发生这种情况时显示一条消息。

有许多资源显示如何执行此操作，例如：

,

此问题并非100％与角度有关，而是与Web模式有关。 大多数最新的浏览器已经具有某种广告拦截器或反分析跟踪功能。

您必须将域添加为“安全/授权”才能打开新标签。

我的建议是添加一个adblocker检测器，并告知用户出于a，b，c原因，他们应将该域添加到白名单中。

取决于用户的类型，这可能是可行的，因为它似乎是一个内部应用程序。 另外，打开一个新标签页时，其内容无法导航或刷新也不是很友好，但这始终取决于用例。

angularangularbrowser-tab