angular - PrimeNG p-dialog 位置上へ

Question

IFrame 内に Angular 4 アプリケーションを表示しています。PrimeNG コンポーネントを使用しており、状況の 1 つで、PrimeNG p ダイアログ ボックスを表示する必要があります。デフォルトでは、p-dialog ボックスは 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 を設定する方法を教えてもらえますか?

ありがとう