Angular 8 設置 ngSstyle 和讀取 offsetwidth 給出舊值

Question

我無法為小型自定義上下文菜單獲取正確的值。 通過ngStyle設置 styles 時。 像下面這樣進行操作時，組件將正確呈現，但console.log將顯示元素實際 position 的錯誤值 ( -9999px )。

我不想用 setTimeout 之類的東西來破解它。 有沒有更好的方法來做到這一點，還是可以聽風格改變？

組件.html

<div class="context-menu" style="position: fixed; top: -9999px; left: -9999px; z-index: 99999" [ngStyle]="contextMenuStyles" #contextMenu></div>

組件.ts

Class XXX {

    

  onContextmenu($event: MouseEvent) {
    $event.preventDefault();

    const top = `${$event.y}px`;
    const left = `${$event.x}px`;

    this.contextMenuStyles = {top, left};

    console.log(this.contextMenu.nativeElement.getBoundingClientRect());
  }

}

Answer 1

我不知道為什么會發生這種情況，但是在通過 renderer2 設置 styles 時可以修復它。

所以代替 [ngStyle] 和 this.contextMenuStyles =... 我只是使用：

this.renderer.setStyle(this.contextMenu.nativeElement, 'top', top);
this.renderer.setStyle(this.contextMenu.nativeElement, 'left', left);

這可以通過對多個 styles 使用幫助程序 function 以更優雅的方式完成。 像這樣的例子：

Class XXX {

  constructor(private renderer: Renderer2) {}

  onContextmenu($event: MouseEvent) {
    $event.preventDefault();

    const setStyles = <DomElement, StyleObj>(domEl: DomElement, styles: StyleObj) => {
      Object.keys(styles).forEach((styleName) => {
        this.renderer.setStyle(domEl, styleName, styles[styleName]);
      });
    };

    setStyles(this.contextMenu.nativeElement, {
      top: `${$event.y}px`,
      left: `${$event.x}px`,
    });

    console.log(this.contextMenu.nativeElement.getBoundingClientRect());
  }

}