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

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

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

Answer 2

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

在parent

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

在child

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

所以你可以在 parent 中订阅并在 children

中发出

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

PrimeNG Dynamic Dialog instance/ content of component

kendo-ui

typescript

primeng

angular