typescript - Angular 4 Portal/CdkPortal fungerer ikke i nytt barnevindu

Jeg jobber i en Angular 4-app og jeg trenger å vise en spesifikk komponent i et nytt barnevindu. Så jeg undersøker etter en løsning (jeg ser IKKE etter en løsning med routing via URL fordi serveren min alltid videresender til index med window.open('noen URL'), så window.open('') med vedlegg kan være løsningen) og jeg fant dette StackBlitz-eksemplet StackBlitz-eksempel

I det eksemplet bruker de CdkPortal. Problemet er tydeligvis at cdk portal ikke finnes i Angular 4 (jeg er ikke sikker, men denne feilen vises @angular/cdk/portal"' har ikke eksportert medlem 'CdkPortal'

Jeg bare kopierer og limer inn det forrige eksemplet fordi det er akkurat det jeg trenger, men i min Angular-versjon fungerer det ikke.

Finnes det et tilsvarende eksempel for Angular 4?

TILLEGGS

i eksemplet bruker de dette kodefragmentet for å vise vinduet

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

så mitt spørsmål er... er det mulig å legge til en annen komponent inne i komponenten som jeg vil feste i portalen? Noe sånt som dette.

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

Hvis det er mulig, ville komponenten fungere riktig?

Svar #1

Prøv dette. Dette vil generere et barnevindu uten bruk av CdkPortal.

Jeg har brukt den generiske window.open-metoden for å åpne et nytt vindu. Jeg har også brukt name-egenskapen til vinduet for å få referanse til det åpne vinduet.

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>

Lenke til fungerende eksempel

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