Javascript 当可以访问DOM时，需要回调

我有一个Angular组件，它获取标记，将其转换为HTML，然后将其插入DOM。插入后，它会执行更多的DOM操作。所以模板是这样的：

<div id="fixroot" [innerHTML]="content"></div>

这里使用的

setTimeout

非常糟糕，但是没有它，

fixupDom

方法就无法工作 因为承诺结束时DOM还没有准备好。但它必须走

我需要的是一个回调（可能来自HtmleElement）

el

），它在DOM结构就绪后立即调用我的例程。我没能做到 使任何事情都有效。有人知道正确的功能吗？

您可以尝试使用加载内容后触发的钩子

如果对div使用模板引用，则可以在触发

ngAfterViewInit

后访问它

这是一种从角度访问DOM的方法，在您希望在web worker中运行时，它与框架无关

由于插入HTML，您还需要通过管道将该HTML传输到，因为XSS具有清理上下文。

在组件和指令的创建和呈现过程中被调用

您可以在指令中实现它，并访问要反映在指令视图中的内容。比如说,

ngAfterContentInit（）{
const el=this.content.nativeElement；
//根据需要突变el
}

您只需等待一次重新绘制。所以setTimeout的值为1甚至0就足够了。@slebetman我认为浏览器的DOM呈现是在与执行Javascript的线程不同的线程中进行的。（我知道，这只是一根线）。因此，很低的超时值可能会失败。这是错误的吗？浏览器的呈现与javascript的线程相同。您可以通过加载一个动画gif，然后编写一个无限

while（）

循环来测试这一点。gif将不会设置动画（浏览器无法加载下一个动画）。但是，要小心这样做，因为您可能必须关闭浏览器（或者在更糟糕的情况下，例如在像Raspberry Pi这样速度较慢的机器上，重新启动计算机），因为这也会阻止浏览器处理鼠标点击等。浏览器是单线程的（对于现代浏览器，浏览器选项卡是单线程的）-不仅仅是javascript@slebetman经过实验证明你是正确的。最终对我有效的方法是在使用document.createElement（）创建的HtmleElement中构造DOM，然后在此基础上设置innerHTML，DOM在之后的语句中立即可用。如果你想写下来作为回应，我会为你标记。是的，我做了消毒步骤，但为了问题的清晰，省略了它。然而，我认为在框架加载页面后会调用一次ngAferViewInit。属性“content”的设置在此之后进行。文档中说：“当指令被实例化时，它只被调用一次”。属性

content

的值在此之后设置。所以这对我不起作用。

ngAfterContentChecked

更合适，如果内容在视图的生命周期内发生变化