新选项卡中的 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

实用解决方案/检测
问题是弹出窗口阻塞，这是一个通用的 javascript 问题，而不仅仅是与 Angular 相关的问题。一种解决方案是检测弹出窗口何时被阻止/关闭并通知用户。
我做了一个非常粗略的实现。我修改了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 浏览器中尝试了它并看到您提到的行为(弹出窗口立即打开和关闭)。
它通知我一个广告被屏蔽了。

因此，正如我在上面所做的那样，我实现了一个简单的 弹出窗口拦截器检测器 (甚至可能是基于简单的 javascript)以便在发生这种情况时显示一条消息。
有多种资源展示了如何执行此操作，例如:

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

https://stackoverflow.com/a/1089792/1688441