在 Angular 框架中,在以下情况下会重新渲染 DOM:
当组件输入属性发生变化时。
当组件级别的状态发生变化时(使用 ChangeDetectionStrategy.Default
策略)。
当异步操作(如 XMLHttpRequest、setTimeout 或 Promise)完成,且 promise 回调内使用了 Angular API(例如 NgZone.run()
或 ChangeDetectorRef.markForCheck()
)。
当 DOM 事件触发时(例如 click
、blur
等)。
对于循环,当数组、集合或迭代器的状态发生变化时,Angular 会重新渲染 DOM。可以使用 ChangeDetectorRef.detectChanges()
手动触发这个过程。
以下是一个包含循环的组件模板的示例:
{{item}}
当 items
数组发生变化时,Angular 会重新渲染该模板。可以在组件的代码中修改 items
数组,例如:
export class MyComponent {
items: string[] = ['item1', 'item2', 'item3'];
addItem() {
this.items.push('new item');
}
}
调用 addItem()
方法后,items
数组会发生变化,Angular 会重新渲染模板并显示新元素。