Question

我试图在aurelia生命周期中找到适当的事件来检查元素的绝对宽度（知道它们是否太窄而不能在其中插入文本）。我认为附加事件是正确的（模型附加到DOM），但后来我得到元素宽度为1：

<template>

  <div ref="notCompliantDiv" css="width:${displayData.notCompliant}%;">${notCompliantText}</div>
</template>

attached() {    
if (this.notCompliantDiv.clientWidth < 10) 
  {
    this.notCompliantText = '';
  }
}

Answer 1

这里的问题是HTML已将自身附加到页面，但您查询的元素上有一个css属性，由Aurelia本身初始化。您将要使用此TaskQueue。

任务队列会将代码的执行推送到堆栈的底部，并在Aurelia完成任何动态逻辑而不是自定义属性之后运行。

import { inject, TaskQueue } from 'aurelia-framework';

@inject(TaskQueue)
export class MyClass {
    constructor(taskQueue) {
        this.taskQueue = taskQueue;
    }

    attached() {
        this.taskQueue.queueMicroTask(() => {
            if (this.notCompliantDiv.clientWidth < 10) {
                this.notCompliantText = '';
            }
        });
    }
}

Aurelia检查附加事件中的clientWidth

1 个答案: