Question

我们在IFrame中显示Angular 4应用程序。我们使用PrimeNG组件，在其中一种情况下，我们需要显示PrimeNG p对话框。默认情况下，对话框显示在Iframe的中心（高度方面），而不是顶部窗口（iframe容器的高度）。

我在p-dialog中找到一个属性positionTop，我们可以在其中设置p-dialog窗口的高度，并创建一个指令

overlayPosition

用于p-dialog元素，如下所示。

<p-dialog [header]="header" [(visible)]="showLookupVariable" overlayPosition>
...
</p-dialog>

在overLayPosition中，我想设置positionTop

import { Directive, ElementRef, OnInit, Renderer2, EventEmitter, Output } from '@angular/core';

@Directive({
  selector: '[overlayPosition]',
})
export class OverlayPositionDirective implements OnInit {
  private element: any;
  constructor(private _elementRef: ElementRef, private _renderer: Renderer2) {
    this.element = _elementRef.nativeElement;

  }

  ngOnInit() {
    this.setHeight();
  }

  setHeight() {
    const self = this;

    try {
      const offsetHeightElement = window.top.scrollY;// will be changing to Angular window later
      this.element.attributes['positionTop'].value = offsetHeightElement;
        } catch (error) {
      // Cross reference errors will be caught here
    }
  }
}

...

但是positionTop属性变成了positiontop（带有小写字母t），p-dialog不接受属性值中规定的高度。

有人可以建议我从属性指令设置positionTop的方式吗？

由于

Answer 1

我使用p-confirmDialog做到了这一点，我认为您可以使用p-dialog做同样的事情

openDialog() {
    this.confirmationService.confirm({
        header: 'Confirmation',
        message: 'Souhaitez-vous revenir au questionnaire?',
        accept: () => {
            //your code goes here
        }
    });

    this.centerConfirmDialog();
}

private centerConfirmDialog() {
    const confirmDialogElement = (<HTMLElement>document.querySelector('.ui-confirmdialog'));
    if(!confirmDialogElement) {
        setTimeout(() => {this.centerConfirmDialog()}, 100);
    }else {
        confirmDialogElement.style.display = "block";
        confirmDialogElement.style.top = window.parent.scrollY + (screen.height / 2) - 124  - (confirmDialogElement.offsetHeight /2) + 'px'; 

    } 
}

124是宿主页面中iframe的位置。您可以使用window.frameElement.offsetTop

在无跨域iframe上获取它

Answer 2

很抱歉，您的回答很晚，但是由于我最近遇到了这个问题，对于可能再次遇到此问题的人，您可以将p-dialog添加到您的focusOnShow中。 public static PlayerData LoadPlayer() { string path = Application.persistentDataPath + "playerdata.bcdata"; if (File.Exists(path)) { BinaryFormatter formatter = new BinaryFormatter(); FileStream stream = new FileStream(path, FileMode.Open); PlayerData data = formatter.Deserialize(stream) as PlayerData; stream.Close(); return data; } else { Debug.LogError("Save file 'playerdata.bcdata' was not found, please reinstall the missing file (error in: " + path + ")"); return null; } }默认为true，因此第一个按钮将焦点集中在show上...这就是为什么视图位于对话框的中心。禁用它时，视图将停留在顶部。

PrimeNG p-dialog positionTop

2 个答案: