1

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

谢谢

4

2 回答 2

0

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

于 2019-12-03T15:00:18.930 回答
0

我用 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 位置在哪里。你可以在没有跨域的 iframe 上使用window.frameElement.offsetTop

于 2018-10-15T08:44:22.650 回答