启用和取消禁用一个组件/HTML中的所有元素

我是一个初学者开发人员，我试图验证一些用户的访问权限，为此我构建了一个服务，该服务根据用户的视图验证用户角色权限，这些视图允许返回true或false。现在我有消息“欢迎”和“你没有访问权”来测试它；现在我需要做的是启用所有页面/组件，然后启用一些功能（表单、按钮、表视图等），或者在用户没有访问权限的情况下禁用所有组件。我需要该用户可以看到该页面，但只有当他有权限将能够使用它。有人知道我怎么做吗

---

您可以在类中声明一个布尔属性，例如

canAccess

，然后在if/else语句中为该属性赋值true或false：

 export class WriteComponent implements OnInit {

   canAccess: boolean;

   constructor(public userMngmtService: UserMngmtRolesService, public router: Router, public routeComponent : ActivatedRoute,public toaster: ToastrService) {

   }

   ngOnInit(){
     var route = "write";
     var role = localStorage.getItem('roleId');
     this.userMngmtService.validatepermissions(role,route).subscribe(
       (canAccess: any) => {
         console.log('canAccess', canAccess);
         if(canAccess == true){
           this.canAccess = true; 
         }else{
           if(canAccess == false){
             this.canAccess = false;
           }
         }
       });
   }
}

然后，您可以在html中使用此属性和

*ngIf

来显示/不显示特定元素：

<div *ngIf="canAccess; else noAccess">
  Welcome
  <!-- put your forms, buttons, tables etc. in here -->
</div>

<ng-template #noAccess>
 <div>You do not have permission to view this</div>
</ng-template>

欢迎
您没有查看此文件的权限

<div *ngIf="canAccess; else noAccess">
  Welcome
  <!-- put your forms, buttons, tables etc. in here -->
</div>

<ng-template #noAccess>
 <div>You do not have permission to view this</div>
</ng-template>