DOM 完成渲染后执行函数答案

【问题标题】：Execute function after DOM has finished renderingDOM 完成渲染后执行函数
【发布时间】：2018-04-05 23:48:51
【问题描述】：

我记得从博客中阅读了下面的摘录。

$timeout 将一个新事件添加到浏览器事件队列中（渲染引擎已经在这个队列中），所以它会在新的超时事件之前完成执行。

我想知道在 angular/javascript 中是否有比使用更好的方法

setTimeout(() => {  
    // do something after dom finishes rendering
}, 0);

在 DOM 完全完成任务（例如更新 *ngFor 并在页面上呈现结果）时执行代码。

【问题讨论】：

你到底想用这个实现什么？
启动打印窗口。由于我懒加载内容，通常我最终会看到加载微调器，因为 DOM 还没有完成渲染内容。

标签： javascript angular

【解决方案1】：

您可以尝试ngAfterViewInit 生命周期钩子，它是按时间顺序排列的最后一个单次触发生命周期钩子。

https://angular.io/guide/lifecycle-hooks

它的工作方式很像ngInit，但它在视图和子视图初始化后触发。

如果您需要在每次 DOM 完成时触发的东西，您可以尝试 ngAfterViewChecked 或 ngAfterContentChecked。

【讨论】：

我相信这只会在页面初始化后触发，而不是在每次 DOM 事件完成后触发
@kplates 我相信你是对的，在这种情况下，你可以尝试一些其他的生命周期钩子，例如可以多次触发的ngAfterViewChecked。（我已经更新了答案以反映这一点）

【解决方案2】：

问题： 有时我需要在加载某些部分后运行一个函数。（我想拉伸一个输入和一个标签）

ngAfterViewInit 和路由变化检测并没有解决我的问题

解决方案： 我做了一个组件，

import { Component,  AfterViewInit } from '@angular/core';

declare var jquery: any;
declare var $: any;

@Component({
selector: 'app-inline-label',
templateUrl: './inline-label.component.html',
styleUrls: ['./inline-label.component.scss']
})
/** InlineLabel component*/
/**

this component stretch inline labels and its input size

*/
export class InlineLabelComponent implements AfterViewInit {

/** InlineLabel ctor */
constructor() {
}
ngAfterViewInit(): void {

var lblWidth = $('.label-inline').width();
var parentWidth = $('.label-inline').parent().width();
var fieldWidth = parentWidth - lblWidth;
$('.form-control-inline').css("width", fieldWidth);

}

}

然后我在我的 html 中的任何地方使用它，比如

<app-inline-label></app-inline-label>

即使我的 html 有 *ngIf=""，我在该标签中使用 app-inline-label 并解决了我所有的问题

其实它会在<app-inline-label> </app-inline-label>被渲染的时候触发

【讨论】：