打开一个新的 window 无需重启 angular 应用程序

Question

I'm trying to open a new window on angular with some informations passing the values in the route to call the endpoint, but when i did this, all the angular application is calling again... This cost me a several times only to show a simple html page. There is another way to do this?

Answer 1

You could try to use Angular CdkPortal to create new portals (or windows). A simple portal would look like

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()
  }
}

Any information passed between the <app-window> tags will be sent to the WindowComponent with the help of <ng-content> . For eg.

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;
}

Working example: Stackblitz