PrimeNG 动态对话框实例/组件内容

Question

我在 PrimeNg 中遇到动态对话框问题。

除此之外，还有其他选项可以处理对话框上的其他操作吗close？

例如，在Kendo-UI对话框示例中，我可以定义组件的 content.instance，并且可以访问作为对话框打开的组件实例的字段。

  const ref = this.dialogService.open(ResourceComponent, {
        data: {
            logicFormGroup: this.formGroup,
            resources: this.resources$
        }, width: '700px'
    });

    ref.onClose.subscribe((back: ResourceModel) => {
        console.log(back);
    });

   ref.addPersonEmitter.sub(....)

   in component ResourceComponent
   @Output() addPersonEmitter = new EventEmitter();

Answer 1

我有同样的问题并这样解决：

const ref = this.dialogService.open(ComponentType, {});
let dialogRef = this.dialogService.dialogComponentRefMap.get(ref);
dialogRef.changeDetectorRef.detectChanges();
const instance = dialogRef.instance.componentRef.instance as ComponentType;
instance.someOutput.subscribe(() =>{ doSomething(); });

调用 detectorChanges 是触发动态对话框加载组件所必需的，否则实例上的 componentRef 将是未定义的。这是因为该组件只是在对话框的 ngAfterViewInit 中加载。

不要忘记取消订阅 ngOnDestroy...

Answer 2

我通过将 eventemitter 传递给对话框数据并订阅该引用来解决它

在父母中

    oneventFire : EventEmitter<number> = new EventEmitter<number>();
this.dialogService.open(MyPopupComponent,
      {data: {  oneventFire : this.oneventFire },

在儿童时期

 if (this.config && this.config.data) { 
      this.oneventFire = this.config.data.oneventFire ;
    }

这样你就可以在父级中订阅并在子级中发出