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

Question

我无法获得小型自定义上下文菜单的正确值。通过 ngStyle 设置样式时。当像下面那样做时，组件将被正确渲染，但是 console.log 将显示元素实际位置的错误值 (-9999px)。

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

component.html

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

component.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 设置样式时解决这个问题。

所以不用 [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());
  }

}

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

Angular 8 setting ngSstyle and reading offsetwidth gives old values

typescript

ng-style

angular

angular-renderer2