角度 | 有没有一个离开导致 *ng如果只运行一次?

Question

我有一个小问题，我需要在我的角度应用程序中应用角色验证。 该应用程序是从每个页面包含许多组件的页面构建的。 用户权限是在组件级别授予的，所以遗憾的是我不能只使用路由保护来授予整个页面，我不得不使用简单的 *ngIf 为每个组件添加验证：

<results-component 
*ngIf="auth.hasPermission('driver_productivity')"
[format] = "driver_productivityFormat" 
[IsFullWidth] = "IsFullWidth"
(customEvent)="showPrint($event)">
</results-component>

auth.service.ts：

hasPermission(permissionName){
if (!this.tokenPayload){
this.getToken().subscribe(t=>{this.tokenPayload=decode(t.getValue())});
if (this.tokenPayload.roles && this.tokenPayload.roles.length>0 ){
this.permissions={};
for (let i=0;i<this.tokenPayload.roles.length;i++){
this.permissions[this.tokenPayload.roles[i]]=true
}
}
}
return this.permissions[permissionName]

}

但是由于我每页有多个组件，这种验证累积了太多时间，因此它变成了滥用解决方案。

[违规] "设置间隔"处理程序占用了 150ms 区域.js：1755 [违规] "点击"处理程序占用了 318ms 区域.js：2279 [违规] "请求动画帧"处理程序占用了 84ms 区域.js：1755 [违规] "点击"处理程序耗时 261 毫秒

有没有办法让 *ngIf 只运行一次？ 首次加载组件时？

Answer 1

有没有办法让 *ngIf 只运行一次？ 当组件 首次加载？

是的。将相应的逻辑移动到组件的ngOnInit(...)方法。因此，当组件加载时，它只执行一次。

Answer 2

您可以按照已经建议的那样将逻辑移动到ngOnInit，也可以构建管道。由于管道是记忆的，因此内部的逻辑只会在输入更改时重新运行。

我创建了一个Stackblitz来展示这一点。