javascript - 当可以访问 DOM 时需要回调

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

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

组件是这样的:

    content: string;

    ...

    async getPage(url: string) {
       try { 
           this.content = this.mdToHtml(await this.http.get(url, { responseType: 'text'}).toPromise();
           setTimeout(() => this.fixupDOM(), 400);

    ....

    fixupDom() {
       const el = document.getElementById('fixroot');
       // do stuff to the DOM element that are children of el

这里使用setTimeout确实很糟糕，但是没有它，fixupDom方法就不起作用因为 Promise 结束时 DOM 还没有准备好。但它必须走。

我需要的是一个回调(可能来自 HTMLElement el)，一旦 DOM 结构准备好，它就会调用我的例程。我没能做到使任何事情发挥作用。有人知道正确的功能吗？

最佳答案

您可以尝试使用ngAfterViewInit 加载内容后触发的钩子(Hook)。

如果您为 div 使用模板引用，那么您可以在 ngAfterViewInit 触发后访问它。

这是访问 DOM 的 Angular 方式，这使得它与框架无关，以防您想在 Web Worker 等中运行...

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

关于javascript - 当可以访问 DOM 时需要回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60013875/