在Angular中,可以通过使用ChangeDetectorRef
来手动触发变更检测,从而刷新列表。以下是一个使用输出事件和ChangeDetectorRef
的示例代码:
组件代码:
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
selector: 'app-list',
template: `
- {{item}}
`
})
export class ListComponent {
items: string[] = [];
constructor(private cd: ChangeDetectorRef) {}
addItem() {
this.items.push('新项目');
this.cd.detectChanges(); // 手动触发变更检测
}
}
在上面的代码中,ChangeDetectorRef
被注入到组件的构造函数中。当点击按钮添加项目时,addItem
方法会将新项目添加到items
数组中,并通过调用detectChanges
方法手动触发变更检测。这将导致列表重新渲染以显示新项目。
请注意,尽量避免频繁调用detectChanges
,因为它可能会影响应用的性能。只在需要时手动触发变更检测。