Angular 8 设置 ngSstyle 和读取 offsetwidth 给出旧值

如何解决Angular 8 设置 ngSstyle 和读取 offsetwidth 给出旧值

我无法为小型自定义上下文菜单获取正确的值。通过 getValue() 设置样式时。像下面那样执行时，组件将正确呈现，但 ngStyle 将显示元素实际位置的错误值 (console.log)。

我不想用 setTimeout 之类的东西来破解它。有没有更好的方法来做到这一点，或者有可能听听风格变化！？

component.html

-9999px

component.ts

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

解决方法

我不知道为什么会发生这种情况，但是可以通过 renderer2 设置样式来修复。

所以，而不是 [ngStyle] 和 this.contextMenuStyles = ... 我只是使用：

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

这可以使用多种样式的辅助函数以更优雅的方式完成。像这样例如：

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());
  }

}