问题描述
我无法为小型自定义上下文菜单获取正确的值。通过 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());
}
}