浏览器的子窗口中的角组件

Question

通过Angular应用程序，我可以通过任何方式创建浏览器的子窗口并在其中显示一些预定义的角度分量。

澄清：我不是在寻找模态对话框的解决方案。

Answer 1

如果您在子窗口中使用window.open，显示窗口应加载website的角度分量使用角形意味着您可以在自己的应用中创建一个孩子对该页面进行特殊路由，然后您将您自己的应用打开到该特定页面路线。如果您选择此解决方案，请注意您的应用程序的大小如果您使用异步路由，此解决方案效果很好，因此当您打开应用程序在新窗口上，您将下载angular +other core libs您正在使用的和+ js for that specific route。

[另一种选择是在您的服务器上创建另一个角度应用仅包含该内容，并且您在同一台服务器上拥有2个应用在这种情况下，您需要在其他网址上创建一个新的角度应用仅包含特定内容

Answer 2

这是我为自己找到的，并且正是您需要的。

https://stackblitz.com/edit/angular-open-window

可以在新的子窗口中显示您的自定义角度分量，并且任何角度服务也将注入到子窗口中显示的任何分量中。

它定义了一个新的WindowComponent，其中包含门户网站主机。该门户网站主机连接到子窗口的主体。这意味着连接到门户网站主机的所有门户网站都将呈现到子窗口的主体。可能会将componentFactoryResolver，applicationRef和injector传递到门户网站主机，以便它可以初始化您的自定义角度分量并将所需的服务注入子窗口中。

const host = new DomPortalHost(
    this.externalWindow.document.body,
    this.componentFactoryResolver,
    this.applicationRef,
    this.injector
);

---

在WindowComponent的模板中，它使用*cdkPortal定义门户。在门户内部，它使用ng-content投影窗口组件的内容，该内容由窗口内容的父级定义。

<ng-container *cdkPortal>
  <ng-content></ng-content>
</ng-container>
[创建WindowComponent时，它将打开一个子窗口，并将其门户附加到门户主机。 WindowComponent被破坏时，它将关闭子窗口。

  ngOnInit(){
    // STEP 4: create an external window
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

    // STEP 5: create a PortalHost with the body of the new window document    
    const host = ...

    // STEP 6: Attach the portal
    host.attach(this.portal);
  }

  ngOnDestroy(){
    // STEP 7: close the window when this component destroyed
    this.externalWindow.close()
  }
这意味着在应用程序组件中，您可以简单地使用窗口组件上的*ngIf指令切换弹出窗口，并将要显示的所有内容嵌套在模板中。

<window *ngIf="showPortal">
  <h2>Hello world from another window!!</h2>
  <button (click)="this.showPortal = false">Close me!</button>
</window>
使用@ angular / cdk包，您还可以修改此示例，以编程方式创建子窗口，方法是使用ComponentPortal而不是使用CdkPortal装饰器检索@ViewChild。通过检索对门户网站主机的引用，您甚至可以以编程方式用其他组件替换子窗口的内容。将门户网站附加到门户网站主机时，您还可以获得实例化组件的ComponentRef，允许您通过代码与其进行交互。

Answer 3

我之前登录过这篇文章，所以如果有人仍然试图在不运行新应用程序的情况下将组件动态加载到不同的窗口中，这就是我的做法：

Answer 4

创建延迟加载组件（作为url）并放入您的url

Answer 5

您可以使用具有target="_blank"属性的链接来完成此操作>

example.component.html

Answer 6

您可以尝试给其他窗口命名。这将打开具有指定名称的每个新窗口。