主页 / 问题 / 621384
Accepted
Ivan Stroykin
Asked:2020-01-31 01:54:59 +0000 UTC2020-01-31 01:54:59 +0000 UTC

根据角色删除页面元素？

  • 772

再会，

做了一个依赖于角色的部分。现在我正在为该部分的不同部分做角色（例如，隐藏一个按钮，或者一个列表，或者......）

为此，在模板中，只需编写以下内容：

<p [hasRole]="['admin', 'user']">Тестовый параграф которые видят только Админ и Пользователь</p>
<div [hasRole]="['admin']">Тестовый блок который видит только Админ</div>

该指令本身如下所示：

import { Directive, OnInit, ViewContainerRef } from '@angular/core';
import { Input } from "@angular/core/src/metadata/directives";

@Directive({
    selector: '[hasRole]'
})
export class HasRoleDirective implements OnInit {

    @Input() hasRole: Array<string>;

    private viewContainerRef: ViewContainerRef;

    constructor(viewContainerRef: ViewContainerRef) {
        this.viewContainerRef = viewContainerRef;
    }

    ngOnInit() {
        this.checkRoles('user');
    }

    checkRoles(userRole: string) {
        console.log("Роль пользователя: " + userRole);
        if (!this.hasRole || this.hasRole.indexOf(userRole) != -1) {
            console.log("Есть доступ");
        } else {
            this.viewContainerRef.clear();
            console.log("Доступ запрещен");
        }
    }

}

用户的查看权限定义完善。但他不想删除它。谁可以推动决定？

angular2

1 个回答

  1. Best Answer

    一个人提出了解决方案 (Alexey Zuev)

    @Directive({
    selector: '[hasRole]'
})
export class HasRoleDirective implements OnInit {
    @Input() hasRole: Array<string>;

    constructor(private viewContainerRef: ViewContainerRef, 
                       private template: TemplateRef<any>) {}

    ngOnInit() {
        this.checkRoles('user');
    }

    checkRoles(userRole: string) {
        console.log("Роль пользователя: " + userRole);
        if (!this.hasRole || this.hasRole.indexOf(userRole) != -1) {
            console.log("Есть доступ");
            this.viewContainerRef.createEmbeddedView(this.template);
        } else {
            this.viewContainerRef.clear();
            console.log("Доступ запрещен");
        }
    }
}

    我们这样使用它：

    <p *hasRole="['admin', 'user']"><Блок видят только Админ и Пользователь</p>
<div *hasRole="['admin']">Тестовый блок который видит только Админ</div>
    • 1

相关问题