Angular 仅运行一次角度变化检测,并停止检测该组件的变化
我只需要在加载组件或路线发生变化时检测一次角度变化,然后我想停止检测变化 实际上,我需要根据用户角色显示和隐藏功能。因此,我在一个html模板中有许多Angular 仅运行一次角度变化检测,并停止检测该组件的变化,angular,typescript,performance,angular2-changedetection,angular-changedetection,Angular,Typescript,Performance,Angular2 Changedetection,Angular Changedetection,我只需要在加载组件或路线发生变化时检测一次角度变化,然后我想停止检测变化 实际上,我需要根据用户角色显示和隐藏功能。因此,我在一个html模板中有许多*ngIf,但我只需要在第一次加载模板时检查一次*ngIf条件,然后停止检测更改,因为这会影响性能 我希望页面在单次更改检测后保持静态 例如: <li *ngIf="doesHavePermission('templateName')"> </li> 应该检查一次,但我看到的是,它多次检查
*ngIf
,但我只需要在第一次加载模板时检查一次*ngIf
条件,然后停止检测更改,因为这会影响性能
我希望页面在单次更改检测后保持静态
例如:
<li *ngIf="doesHavePermission('templateName')">
</li>
应该检查一次,但我看到的是,它多次检查单个*ngIf
的更改,我有许多*ngIf
如下:
我找到了markForCheck()
以及本文档中的detach()
但他们所做的是要么允许所有的改变
检测到或根本没有
我只需要检测一次变化,然后停止
我们可以在角度上进行单次变化检测吗
还是有更好的方法来处理场景?当您在
*ngIf
中使用函数调用时,angular会在每次检测到更改时调用此函数。无论此changeDetection是在组件外部还是内部触发,但angular在调用此函数之前无法知道函数的返回值是否已更改
因此,通常在*ngIf
内部使用函数调用不是一个好方法
备选方案:
在组件内使用法线属性:
instead of
<div *ngIf="checkCondition()"></div>
use this
<div *ngIf="condition"></div>
@Component(...)
class MyComponent {
condition= false;
checkCondition() {
if(something) {
this.condition = true;
}
}
}
这里有一篇很好的文章供进一步阅读:您可以使用
ChangeDetectorRef
注入器的detach
方法从变更检测循环中移除当前组件。
您可以随时调用reatach
方法或手动调用detectChanges
以快速运行更改
对我来说,这是最可靠的方法
但请注意,它总是会关闭所有儿童的变化检测 我建议您阅读这篇文章:,它将为您提供一个关于默认和onPush策略的良好概述。不幸的是,如果您看到与CD相关的性能问题,通常意味着您的组件写得不好,或者您正在处理大量实时数据。OnPush是一种性能调整,应该在需要时小心使用。我知道这是一种很好的方法,我很感激,但如果我必须运行一些逻辑来决定*ngIf的正确与否,该怎么办?要么在ngOnInit中运行此逻辑并构建映射,要么在父组件中通过
@Input
因此我有一个字符串,我需要根据不同的功能检查该字符串中的特定索引中是否存在特定字符。所以我既不能在parent和ngOnInit中计算它,也不能在ngOnInit中计算它,因为它需要动态计算,因为它依赖于特定的功能。那么你对此有什么建议呢?在运行时计算某些东西本身就是动态的。必须有一个点,你有所有的参数来计算你的条件,通常是在你基于该条件渲染元素之前,所以在parent或ngOnint中计算是处理这个问题的正常方法。在你的情况下,我不知道你的要求是什么,也不知道你的申请。也许你能提供一次闪电战?
@Component(...)
class MyComponent{
conditions: { [key: string]: boolean }
ngOnInit() {
condition = {
template1: true,
template2: false
}
}
}
<div *ngIf="conditions['template1']"></div>
@Component({
...
changeDetection: ChangeDetectionStrategy.OnPush
})
class MyComponent{
@Input() conditions: { [key: string]: boolean }
}