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

【问题标题】：Angular open component in new tab without bootstrapping whole app新选项卡中的 Angular 打开组件，无需引导整个应用程序
【发布时间】：2021-02-03 04:34:45
【问题描述】：

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

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

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

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

【问题讨论】：

stackblitz 版本似乎在 Chrome 正常模式下对我有用 - stackblitz.com/edit/portal-simple?file=src/app/app.component.ts
@Akash 我刚刚再次测试，它不能在 Chrome 正常模式下工作，但在私人模式下工作
它也对我有用，Chrome/Firefox 正常/私人模式，一切正常。我已经等了将近 30 秒，但没有自动关闭。
您的普通模式浏览器是否有弹出/广告拦截器或类似的扩展程序？隐身模式禁用了所有扩展程序。
@j.f.是的，我有 adblocker，但它并没有显示它正在阻止任何东西，并且在关闭它后它也不起作用

标签： angular browser-tab

【解决方案1】：

实用解决方案/检测

问题是弹出窗口阻塞，这是一个一般的 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 浏览器中进行了尝试，并看到了您提到的行为（弹出窗口立即打开和关闭）。

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

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

有很多资源展示了如何做到这一点，例如：

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：