1

我无法为小型自定义上下文菜单获取正确的值。通过设置样式时ngStyle。当像下面那样做时，组件将被正确渲染，但console.log会为元素的实际位置显示错误的值（-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());
  }

}
4

1 回答 1

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

}
于 2021-01-26T15:37:58.547 回答