如何在ngFor之后检测DOM何时准备好? [英] How to detect when DOM ready after ngFor?
本文介绍了如何在ngFor之后检测DOM何时准备好?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想为 元素设置动画(例如使用 jQuery).
I want to animate <li>
elements (e.g. usign jQuery).
但是如何在 *ngFor 之后检测 DOM 何时完成?
But how can I detect when DOM is done after *ngFor?
查看
<ul #ul>
<li *ngFor="let event of events">{{event|date:'medium'}}</li>
</ul>
<button (click)="showEvents()">Show events</button>
组件
export class AppComponent {
@ViewChild('ul') ulRef: ElementRef;
events: any[];
showEvents(): void {
// Assume this set of events will be different in every button click
this.events = [
new Date(2017, 1),
new Date(2017, 3),
new Date(2019, 6)
];
const li = this.ulRef.nativeElement.children;
// This logs empty array for first time or
// previous set of children for next times
console.log( li );
};
}
P.S. 我知道使用 setTimeout
可以解决这个问题,但这是正确的方法吗?
P.S. I know using setTimeout
will solve this, but is it right approach?
解决方案
感谢@ThinkingMedia.在 和
QueryList
上使用模板变量,我可以观察变化.
Thanks to @ThinkingMedia. Using template variable on the <li>
and QueryList
I can watch for changes.
<ul>
<li *ngFor="let event of events" #li>{{event|date:'medium'}}</li>
</ul>
@ViewChildren('li') li: QueryList<ElementRef>;
ngAfterViewInit(): void {
this.li.changes.subscribe(() => {
const elements = this.li.toArray().map(i => i.nativeElement);
// Here I can have access to the li elements when DOM updated
console.log(elements);
});
}
推荐答案
您可以使用 AfterViewInit 生命周期钩子.
you can use the AfterViewInit life-cycle hook.
这个生命周期钩子在视图初始化后触发.
this life-cycle hook is trigger after the view is initialized.
你可以这样使用:
import { AfterViewInit } from '@angular/core';
export class AppComponent implements AfterViewInit{
@ViewChild('ul') ulRef: ElementRef;
ngAfterViewInit() {
// your logic
}
events: any[];
showEvents(): void {
this.events = [
new Date(2017, 1),
new Date(2017, 3),
new Date(2019, 6)
];
const li = this.ulRef.nativeElement.children;
// This logs empty arrays since DOM not changed yet
console.log( li );
};
}
这篇关于如何在ngFor之后检测DOM何时准备好?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文