typescript - Angular 4 Portal/CdkPortal no funciona en una nueva ventana hija

Estoy trabajando en una aplicación Angular 4 y necesito mostrar un componente específico en una nueva ventana hija. Así que investigué una solución (NO estoy buscando una solución con enrutamiento por URL porque mi servidor siempre redirige a index con window.open('algun URL'), así que window.open('') con adjuntar podría ser la solución) y encontré este ejemplo en StackBlitz Ejemplo de StackBlitz

en ese ejemplo, se está usando CdkPortal. El problema es que aparentemente cdk portal no está en Angular 4 (no estoy seguro, pero este error muestra @angular/cdk/portal"' no tiene un miembro exportado 'CdkPortal')

Solo copio y pego el ejemplo anterior 'porque es exactamente lo que necesito, pero en mi versión de Angular no funciona.

¿Hay algún ejemplo equivalente para Angular 4?

ADICIONAL

en el ejemplo, están usando este fragmento de código para mostrar la ventana

<window *ngIf="showPortal">
  <h2>Hello world from amother window!!</h2>
  <button (click)="this.showPortal = false">Close me!</button>
</window>

entonces mi pregunta es... ¿es posible agregar otro componente dentro del componente que quiero adjuntar en el portal? Algo así.

<window *ngIf="showPortal">
  <my-other-component [currentValue]="someValue"></my-other-component>
</window>

Si es posible, ¿funcionaría correctamente el componente?

Respuesta #1

Prueba esto. Esto generará una ventana hija sin usar CdkPortal.

He utilizado el método genérico window.open para abrir una nueva ventana. También he usado la propiedad name de la ventana para obtener la referencia de la ventana abierta.

app.component.ts

import { Component,ComponentFactoryResolver, ViewChild, ViewContainerRef,Injector } from '@angular/core';
import { DynamicWindowComponent } from './dynamic-window/dynamic-window.component';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  injector: Injector;
  OpenWindow : any

  constructor(private resolver: ComponentFactoryResolver) { }

  open(): void {
    const componentFactory = this.resolver.resolveComponentFactory(DynamicWindowComponent);
    let componentRef  = componentFactory.create(this.injector);
    this.OpenWindow = window.open('', 'childwindow', 'width=400,height=400,left=150,top=200');
    this.OpenWindow.document.body.innerHTML = "";
    this.OpenWindow.document.body.appendChild(componentRef.location.nativeElement);
  }

  close(){
    this.OpenWindow.close()
  }
}

app.component.html

<button (click)="open()">Dynamically Add Component</button>

dynamic-window.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-window',
  templateUrl: './dynamic-window.component.html',
  styleUrls: ['./dynamic-window.component.css']
})
export class DynamicWindowComponent{
  close(){
    // get refence of child window by its name and close it
    let existingWin = window.open('', 'childwindow');
    existingWin.close();
  }
}

dynamic-window.component.html

<p>Dynamic Component</p>
 <button (click)="close()">Close me!</button>

Enlace de ejemplo funcional

https://stackblitz.com/edit/angular-rbapx4?embed=1&file=src/app/app.component.ts