Question

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

$ timeout将新事件添加到浏览器事件队列（渲染引擎已在此队列中），因此它将在新的超时事件之前完成执行。

我想知道角度/ javascript是否有比使用

更好的方法

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

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

Answer 1

你可以试试ngAfterViewInit生命周期钩子，它是按时间顺序排列的最后一次单火生命周期钩子。

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

它与ngInit非常相似，但在视图和子视图初始化后会触发。

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

Answer 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>时完全触发

DOM完成渲染后执行函数

2 个答案: