无论何时UI更新,都会调用Angular模板函数吗



我写了这个演示,我想确保我正确理解动力学。

在其中,只要选中其中一个复选框,就会触发可观察复选框事件的相应merge

触发器会导致重新定义一组实例,这些实例说明材质表列是否应隐藏。

该组件还具有定义材料表列的方法:


getDisplayedColumns():string[] {
return this.columnDefinitions.filter(cd=>!cd.hide).map(cd=>cd.def);
}

IIUC方法被调用的原因是它在UI更新的任何时候都会被调用。换句话说,角度变化检测会触发它吗?

每个更改检测周期都会从模板中调用您的方法更改检测机制尝试查找组件模型中的任何更改,然后重新渲染更改的部分。

但是,您可以通过设置更改检测策略来管理更改检测机制如何与组件一起工作。

变更检测策略

默认情况下,启动更改检测的原因有很多——点击、滚动或其他异步事件。因此,该方法可以被调用成百上千次。

但是您可以在组件中使用changeDetection: ChangeDetectionStrategy.OnPush。只有在@Input()属性发生更改时,更改检测机制才会检查更改。

但这只是解决方案的一半。。。

避免在模板中使用方法

另一半是根本不在模板中使用方法,并在那里使用类属性。顺便说一句,getters和遵循相同的规则

<mat-row *matRowDef="let row; columns: columns"></mat-row>

您所需要的一切都是在真正应该更改this.columns的时候在类中设置它。

我希望它能有所帮助。

是。UI中的每次单击或其他事件都会尝试一次又一次地调用getDisplayedColumns,因为它是html中的一个方法。您必须避免这种情况,在加载时使用此列设置类属性。

查看我的更正:https://stackblitz.com/edit/angular-material-table-hide-columns-owzmtl?file=src/app/app.component.ts

最新更新