<paper-dialog>中过早开火的事件

问题描述

我正在使用来显示将以编程方式构造的SVG图像。在开始之前，我需要知道渲染容器的大小。我正在等待已打开的属性更改为true，但是在触发时.clientWidth为0显然还为时过早，但稍后.clientWidth确实提供了正确的值。

<paper-dialog class="dialog" opened={{modalOpen}} modal>
     <svg width="100%",height="100%" />
</paper-dialog>

如何等待SVG clientWidth和clientHeight的计算？

解决方法

有时，在DOM有时间完成处理之前会触发JS事件，在这里似乎是这种情况。

要解决此问题（或至少提供有关正在发生的事情的其他线索），请尝试将代码（用于clientWidth属性）放在setTimeout()函数中，并赋予零（0）毫秒超时。这只会将您的代码移动到JS执行堆栈的末尾，该操作仅在DOM完成更新之后才可以处理...然后在DOM元素的大小和定位属性可用时进行处理。

这是一个例子...

modalOpen() {
  setTimeout( () => {  
    /* Your code here... for example... */
    const paperDialog = document.getElementsByTagName("paper-dialog")[0];
    console.log("paperDialog width = ",paperDialog.clientWidth);  
  },0);  /* 0 milliseconds = Execute immediately after everything else processes. */
}

警告：通常不赞成使用setTimeout()，因为它不能完全遵循异步开发，并且会产生意想不到的结果（例如过早触发或不尽快触发） ）。尽管这种方法很快并且可以在某些情况下正常工作，但是触发和处理事件通常是解决这些时序问题的最佳方法。

,

聚合物的<paper-dialog>实现了iron-resizable-behavior，因此我们可以监听iron-resize事件：

disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('iron-resize',this.onIronResize);
}