angular-calendar 中如何按用户角色隐藏指定CalendarEventAction操作按钮

你只需先在组件内维护当前用户的权限状态，再根据权限动态生成操作按钮数组即可，具体实现如下：

1. 定义权限判断标识 #

首先在组件类中新增管理员权限判断属性，在用户信息加载完成后完成赋值：

// 组件属性：标识当前用户是否为管理员
isAdmin: boolean = false;

// 示例：在用户信息初始化逻辑中赋值，可根据你项目实际的权限获取逻辑调整
ngOnInit(): void {
  // 假设currentUser是你项目中存储的当前登录用户全局信息
  this.isAdmin = this.currentUser?.role === 'administrator';
}

2. 动态构建操作按钮数组 #

不再写死actions数组的内容，先加入所有用户都可见的编辑按钮，再判断用户为管理员时追加删除按钮：

// 先初始化所有用户通用的操作按钮
actions: CalendarEventAction[] = [
  {
    label: '<i class="material-icons mat-icon">edit</i>',
    onClick: ({ event }: { event: CalendarEvent }): void => {
      this.editCalendarEvent(event);
    }
  }
];

// 权限判断：仅管理员加入删除按钮
if (this.isAdmin) {
  this.actions.push({
    label: '<i class="material-icons mat-icon">remove</i>',
    onClick: ({ event }: { event: CalendarEvent }): void => {
      this.removeCalendarEvent(event);
    }
  });
}

补充说明 #

• 如果你的项目支持无刷新切换用户角色，需要在角色变更时重新执行上述构建actions数组的逻辑，同步更新按钮的展示状态
• 前端仅做展示层的按钮隐藏，后端对应的删除日历事件接口必须额外加管理员权限校验，避免普通用户通过直接调用接口绕过前端限制执行删除操作

内容的提问来源于stack exchange，提问作者George Dascalu