Angular 4 Portal/CdkPortal 在新 child window 中不起作用

Question

我在 Angular 4 应用程序中工作，我需要在新 child window 中显示特定组件。所以我研究了一个解决方案（我不是在寻找通过 url 路由的解决方案，因为我的服务器总是重定向到 window.open（'some URL'）的索引，所以 window.open('') with ataching 可能是解决方案）我发现了这个 stackblitz example StackBlitz Example

在那个例子中，使用的是 CdkPortal 。问题显然是 cdk portal 不在 angular 4 中（我不太确定，但是这个错误显示 @angular/cdk/portal"' has no exported member 'CdkPortal'）

我只是复制并粘贴前面的示例，因为这正是我所需要的，但在我的 angular 版本中不起作用。

是否有 angular 4 的等效示例？

附加

在示例中，他们使用此代码片段来显示 window

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

所以我的问题是...是否可以在我想在门户中附加的组件中添加其他组件？像这样。

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

如果可行，该组件能否正常工作？

Answer 1

试试这个。这将在不使用 CdkPortal 的情况下生成子 window。

我使用通用 window.open 方法打开了一个新的 window。我还使用 window 的名称属性来获取打开的 window.

的参考

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>

动态-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();
  }
}

动态-window.component.html

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

工作示例link

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

Angular 4 Portal/CdkPortal 在新 child window 中不起作用

Angular 4 Portal/CdkPortal not working in new child window

portal

window

typescript

angular