浏览器子窗口中的 Angular 组件 [英] Angular component in a Browser's child window
本文介绍了浏览器子窗口中的 Angular 组件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
从 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');
}
}
这篇关于浏览器子窗口中的 Angular 组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文