当所有嵌套的子自定义元素都附加到DOM时，在父组件中回调？

Question

我在视图中添加了一个组件componentA。它由componentA.js和componentA.html组成。现在componentA.html包含两个自定义元素customElement1和customElement2。 Additaionlly，customElement1还包含自定义元素customElement1-1。

componentA.html

<template>
    <require from="..."></require
    <require from="..."></require

    <customElement1></customElement1>
    <customElement2></customElement2>
</template>

customElement1.html

<template>
    <require from="..."></require>

    <customElement1-1></customElement1-1>
</template>

将activate挂钩添加到这些自定义元素会产生以下输出：

componentA - activate
customElement1 - activate
customElement1-1 - activate
customElement2 - activate
---
Need to call componentA here, but all custom elements have to be attached to DOM

当所有嵌套的自定义元素都附加到DOM时，是否可以从componentA调用其他钩子？

Answer 1

我设法找到了使用TaskQueue的解决方案。有关详细信息，请参阅this post

  

微任务允许您将任务推迟到下一个事件上执行   循环或打勾。排队微任务时，您正在为此安排   在当前执行后立即执行的特定任务   脚本。

componentA.js

import {TaskQueue} from 'aurelia-framework';

@inject(TaskQueue)

export class ComponentA {
    constructor(TaskQueue) {
        this.tq = TaskQueue;
    }

    attached() {
        this.tq.queueMicroTask(() => {
            console.log('Hello world');
        });
    }
}

通过添加上面的代码，产生了以下输出：

componentA - activate
customElement1 - activate
customElement1-1 - activate
customElement2 - activate
componentA - Hello world