4

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

我发现文章在新的浏览器选项卡中动态打开 Angular 组件，而无需再次引导整个应用程序，这正是我所需要的。

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

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

4

2 回答 2

3

实用解决方案/检测

问题是弹出窗口阻塞，这是一个一般的 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 的），以便在发生这种情况时显示一条消息。

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

于 2020-10-29T10:37:20.693 回答
0

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

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

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

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

于 2020-10-29T09:42:44.423 回答