在不重新启动角度应用程序的情况下打开新窗口

Question

我正在尝试打开一个有关angular的新窗口，其中包含一些信息，这些信息将路由中的值传递给调用端点，但是当我这样做时，所有angular应用程序都在再次调用...这只花费了我几次，以显示一个简单的html页面。还有另一种方法吗？

Answer 1

您可以尝试使用Angular CdkPortal创建新的门户（或Windows）。一个简单的门户看起来像

CdkPortal

在

import {Component, ViewChild, OnInit, ComponentFactoryResolver, ApplicationRef, Injector, OnDestroy } from '@angular/core';
import {CdkPortal, DomPortalHost} from '@angular/cdk/portal';

@Component({
  selector: 'app-window',
  template: `
    <ng-container *cdkPortal>
      <ng-content></ng-content>
    </ng-container>
  `
})
export class WindowComponent implements OnInit, OnDestroy {
  @ViewChild(CdkPortal) portal: CdkPortal;
  private externalWindow = null;

  constructor(
    private componentFactoryResolver: ComponentFactoryResolver,
    private applicationRef: ApplicationRef,
    private injector: Injector){}

  ngOnInit(){
    this.externalWindow = window.open('', '', 'width=600,height=400,left=200,top=200');

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

    host.attach(this.portal);
  }

  ngOnDestroy(){
    this.externalWindow.close()
  }
}

标签之间传递的任何信息都将在<app-window>的帮助下发送到WindowComponent。例如。

<ng-content>
工作示例：import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <p>Click this button to open a new window:</p>
    <button (click)="this.showPortal = true">Open Window</button>

    <app-window *ngIf="showPortal">
      <h2>Data from another window.</h2>
      <button (click)="this.showPortal = false">Close Window</button>
    </app-window>
  `,
})
export class AppComponent  {
  showPortal = false;
}