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

Question

在我的Angular 10应用程序中，我想在新的浏览器选项卡中打开组件。我想在不引导整个应用程序并创建另一个应用程序实例的情况下执行此操作。

我发现文章在新的浏览器选项卡中动态打开 Angular 组件，无需再次引导整个应用程序，它准确地描述了我所需要的内容。

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

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

Answer 1

实用解决方案/检测

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

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

我添加了在调用detectPopBlocker初始值后 2 秒执行的方法window.open。请注意，原始代码等待 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. "
      );
    }
  }

理论

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

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

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

因此，正如我上面所做的那样，我实现了一个简单的弹出窗口阻止程序检测器（甚至可能是基于简单的 JavaScript），以便在发生这种情况时显示一条消息。

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

• 如何检测浏览器是否阻止弹出窗口？
• /sf/answers/76285471/