浏览器的子窗口中的角度组件 [英] Angular component in a Browser's child window

问题描述

通过Angular应用程序，我可以通过任何方式创建浏览器的子窗口并在其中显示一些预定义的角度分量.

From an Angular application is there any way that I can create a Browser's child window and show some predefined angular component in it.

说明:我不需要模态对话框解决方案.

Clarification : I am not looking for a Modal dialog solution.

推荐答案

我之前登录过此帖子，因此，如果有人仍在尝试渲染组件动态加载到其他窗口而不运行新应用程序，这就是我的方式做到了:

I landed on this post before, so in case someone still trying to render a component dynamically loaded on a different window without running a new app, this is how I did it:

export class ChildLoaderComponent implements OnInit, AfterViewInit {
  constructor(private r: ComponentFactoryResolver, private 
                           viewContainerRef: ViewContainerRef) { }
  public windowReference: any;
  ngAfterViewInit() {
    setTimeout(() => {
      //create the component dynamically
      const factory = this.r.resolveComponentFactory(AChildComponent);
      const comp: ComponentRef<AChildComponent> =
        this.viewContainerRef.createComponent(factory);
      //in case you also need to inject an input to the child, 
      //like the windows reference 
      comp.instance.someInputField = this.windowReference.document.body;
      //add you freshly baked component on the windows
      this.windowReference.document.body.appendChild(comp.location.nativeElement);
    });
  }

  ngOnInit() {
    //create the windows and save the reference     
    this.windowReference = window.open('', '_blank', 'toolbar=0, width=800, height=400');
  }
}

这篇关于浏览器的子窗口中的角度组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！