Angular 在新选项卡中打开组件而不引导整个应用程序

Question

在我的 Angular 10 应用程序中，我想在新的浏览器选项卡中打开组件。我想在不引导整个应用程序和创建另一个应用程序实例的情况下这样做。

我找到了文章 Open Angular components dynamically in new browser tab without bootstrapping the whole app again，它准确地描述了我的需要。

但存在一些问题 - 它无法正常工作。在 Chrome 隐身模式下，它工作正常，但在 Chrome 下，在正常模式下或 Firefox 不工作。它打开新选项卡几毫秒并自行关闭。在其他计算机上，它在 Firefox 中运行良好，但在 Chrome.

中根本不起作用

我的问题是，是否可以通过一些解决方案或 hack 来实现这一点，并允许它在任何或大多数浏览器中工作？我不想创建多个实例，因为这将很难沟通并保持应用程序的一种状态。

Answer 1

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

您必须将域添加为“safe/authorized”才能打开新标签页。

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

这取决于用户的类型，因为它似乎是一个内部应用程序。此外，打开一个包含无法导航或刷新内容的新选项卡也不是很友好，但这始终取决于用例。

Answer 2

实用解决方案/检测

问题是 pop-up 阻塞，这是一个普遍的 javascript 问题，不仅与 angular 相关。一种解决方案是检测 pop-up 何时为 blocked/closed 并通知用户。

我做了一个很粗略的实现。我修改了 popout.services.ts 文件并添加了检测以查看 window 是否打开 and/or 存在。

我添加了 detectPopBlocker 方法，它在初始 window.open 被调用后 2 秒执行。请注意，原始代码等待 1 秒以便将数据发送到新的 window 实例。

项目：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. "
      );
    }
  }

理论

问题不在于您的代码，而是与 ad/popup 阻塞有关。

我在没有 ad-blocking 的浏览器中尝试了这个例子，它运行良好。我还在带有 Adblock extension 的 chrome 浏览器中尝试过它，看到了你提到的行为（弹出 window 立即打开和关闭）。

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

所以，正如我上面所做的，我实现了一个简单的 pop-up 拦截器检测器（甚至可能是简单的 javascript 基础）以显示发生这种情况时的消息。

有多种资源展示了如何执行此操作，例如：

How can I detect if a browser is blocking a popup?

Angular 在新选项卡中打开组件而不引导整个应用程序

Angular open component in new tab without bootstrapping whole app

browser-tab

angular

实用解决方案/检测

理论