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]

}

但是由于我每页有多个组件，所以这种验证的时间太多了，因此成为一种令人讨厌的解决方案。

[Violation]'setInterval'处理程序花费了150ms zone.js：1755 [Violation] “点击”处理程序花了318ms zone.js：2279 [违反] 'requestAnimationFrame'处理程序花费了84毫秒zone.js：1755 [违反] “点击”处理程序耗时261毫秒

是否可以使* ngIf仅运行一次？何时首次加载组件？

Answer 1

是否可以使* ngIf仅运行一次？当组件是首先加载？

是的。将相应的逻辑移到组件的ngOnInit(...)方法中。因此，仅在组件加载后一次执行。

Answer 2

您可以按照建议将逻辑移至ngOnInit，也可以构建管道。由于管道是经过记忆的，因此内部逻辑仅在输入更改时才重新运行。

我创建了一个Stackblitz来展示此内容。

Angular 7会导致* ngIf仅运行一次吗？

2 个答案: