从angular-calendar禁用CalendarEventAction

Question

我有两个动作，

  actions: CalendarEventAction[] = [

    {
      label: '<i class="material-icons mat-icon">edit</i>',
      
      onClick: ({ event }: { event: CalendarEvent }): void => {
         this.editCalendarEvent(event);
    }
    }, {
      label: '<i class="material-icons mat-icon">remove</i>',
      
      onClick: ({ event }: { event: CalendarEvent }): void => {
         this.removeCalendarEvent(event);
    }
    },
]

但我只想让具有角色的用户(例如:管理员)看到第二个图标，即remove事件。

如何向其他用户隐藏第二个图标，并向管理员显示该图标。

谢谢

Answer 1

我还没有尝试过angular，所以我不是回答这个问题的最佳人选，所以希望有人能提出更好的解决方案。但是，就目前而言，您可以在onClick函数中添加一个条件来检查用户是否具有权限。

onClick: ({ event }: { event: CalendarEvent }): void => {
    if(user.admin) {
        this.removeCalendarEvent(event);
    } else {
        alert("--!!! You Don't Have Permission To Perform This Action !!!--");
    }
}

您还可以尝试onload向标签添加onload函数，并像以前一样检查用户是否是管理员，如果不是，则可以设置label.disabled="true"

...
label: '<i onload="checkPermission()" id="removeBtn" class="material-icons mat-icon">remove</i>',
...

checkPermission() => {
    if(!user.admin) {
       document.getElementById("removeBtn").disabled = true;
    }
}

或者干脆完全隐藏按钮

...document.getElementById("removeBtn").display = "hidden";
...

您可能希望从后端的数据库中提取用户数据(例如角色)。您可以使用node.js来实现这一点。否则，您更容易受到通过控制台获得管理员权限的人的影响。