Angular 如何根据用户角色显示/隐藏元素4

我正在从事一个有多个用户类型的项目（超级用户-学校管理员-教师）

每个角色都有查看某些元素的权限

如何使用*ngIf根据记录的用户角色隐藏元素

这是Stack blitz上的项目，我上传了其中的一些内容来指导我进行现场预览

在应用程序中，您会发现common services>>auth，这是一个包含登录服务和身份验证保护的文件夹

在models>>enum中，您将找到用户类型enum

在组件登录中，您将找到定义用户类型的表单

在routes中，您将看到为每个组件创建的预期角色

我为测试制作的用户：

这会把你送到学校名单上

管理员（具有超级用户角色）： test1@test.com 密码：12345

这将引导您进入仪表板

学生（具有学生角色）： test2@test.com 密码：12345

例如，如果我想隐藏仪表板上的元素，使其仅显示给超级用户角色，我如何才能做到这一点

我知道ngIf有一种方法，但我一直坚持在ngIf内部编写它的正确方法，我希望代码中的示例不是伪代码

---

更新：问题已解决，因此我删除了为测试而创建的用户。

布尔值true或false用于隐藏。在HTML文件中

\u要打印的内容\u

在.ts文件中初始化

test=false因此无论何时
this.test=truediv将显示，否则将处于隐藏状态。检查您的状况并使
test=true
布尔值true或false用于隐藏。在HTML文件中
\u要打印的内容\u
在.ts文件中初始化
test=false因此无论何时
this.test=truediv将显示，否则将处于隐藏状态。检查您的状况并使
test=true
在您的项目中，当用户注册时，您会询问他是“老师”、“家长”还是“学生”。这就是你的情况

当您登录或注册时，您应该将您的用户数据保存在某个位置（例如，在您可以使用的服务中）

然后，使用这些数据，您应该在DOM中进行如下测试：

/* if type_id == id(student) */
 <div *ngIf="myService.currentUser.type_id">
   // your student display ...
 </div>

 /* if type_id == id(teacher) */
 <div *ngIf="myService.currentUser.type_id">
   // your teacher display ...
 </div>

然后在构造函数中注入该服务，在

组成部分：

// Don't forgot to import UserService !!
constructor(public userService: UserService){}

DOM:

在您的项目中，当用户注册时，您会询问他是“老师”、“家长”还是“学生”。因此，这里有您的条件

当您登录或注册时，您应该将您的用户数据保存在某个位置（例如，在您可以使用的服务中）

然后，使用这些数据，您应该在DOM中进行如下测试：

/* if type_id == id(student) */
 <div *ngIf="myService.currentUser.type_id">
   // your student display ...
 </div>

 /* if type_id == id(teacher) */
 <div *ngIf="myService.currentUser.type_id">
   // your teacher display ...
 </div>

然后在构造函数中注入该服务，在

组成部分：

// Don't forgot to import UserService !!
constructor(public userService: UserService){}

DOM:

你应该做：

<div *ngIf="superUserLogged">
   // your SuperUser display ...
 </div>
<div *ngIf="schoolAdminLogged">
       // your SuperUser display ...
</div>
<div *ngIf="teacherLogged">
       // your SuperUser display ...
</div>

你应该做：

<div *ngIf="superUserLogged">
   // your SuperUser display ...
 </div>
<div *ngIf="schoolAdminLogged">
       // your SuperUser display ...
</div>
<div *ngIf="teacherLogged">
       // your SuperUser display ...
</div>

是的，这就是我想在我的项目链接中检查公共服务文件夹中的登录服务，我做了类似的事情，但我不知道如何在ngIf中调用函数（我的函数），我陷入了这样的困境：DJust把你的声明放在构造函数中，就像你在public loginService:loginService中做的那样，然后在dom*ngIf中做=“loginService.currentUser.type_id”，如果你有一个currentUser变量当然不起作用，我写了*ngIf=“this.authService.setUser（loginda）==loginda.user.type_id==UserType.SuperUser”我知道语法，写它的时候我只是被卡住了，我不知道在ngIf上调用UserType id的正确方法，我想在我的代码plz:）是的，问题是它们被声明为私有，我将它们声明为公共，现在工作了，谢谢：）是的，这是我想要检查的，在我的项目链接中的公共服务文件夹中的登录服务，我做了类似的事情，但我不知道如何调用该函数（我的函数）在ngIf内部，我陷入了这样的困境：只需像在public loginService:loginService中那样将声明放在构造函数中，然后在dom*ngIf=“loginService.currentUser.type_id”中执行，当然如果您有currentUser变量。不，它不起作用，我写了*ngIf=“this.authService.setUser（loginda）==loginda.user.type_id==UserType.SuperUser“我知道语法，我写它的时候被绊倒了，我不知道在ngif上调用UserType id的正确方法，我想在我的代码上举个例子，plz:）是的，问题是它们被声明为私有，我声明为公共，现在工作了，谢谢：）