PrimeNG p-对话框位置顶部答案

【问题标题】：PrimeNG p-dialog positionTopPrimeNG p-对话框位置顶部
【发布时间】：2018-09-11 19:27:13
【问题描述】：

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

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

叠加位置

在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 的方式吗？

谢谢

【问题讨论】：

标签： angular primeng primeng-dialog

【解决方案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 上获取它

【讨论】：

【解决方案2】：

很抱歉回答迟了，但由于我最近遇到了这个问题，对于可能再次遇到这个问题的人，您可以将 [focusOnShow]="false" 添加到您的 p-dialog。 focusOnShow 默认情况下为 true，因此第一个按钮获得焦点显示...这就是为什么您的视图位于对话框中心的原因。当您禁用它时，您的视图将保持在顶部。

【讨论】：