Question

我有一个应用程序，该应用程序具有基于角色的访问权限。我正在使用*ngIf来允许/阻止用户访问某些组件。

是否有一种使用自定义指令的方法，该指令将根据用户角色处理组件的“存在”；而不是像这样的完整*ngIf条件：

<admin-menu *ngIf="user.role =='admin'"></admin-menu>

<admin-menu my-custom-directive ></admin-menu>

    my-custom-directive {

    //make the component where this directive is attached render or vanish based on the user.role
    ngAfterViewInit() {
        if(user.role == 'admin'){
            //render the component
        } else {
            //vanish the component
        }

    }

}

Answer 1

是的。您可以为此使用结构指令。它非常简单，可以通过*appIfRole=""来使用。与*ngIf完全相同。

只需引用此URL-https://angular.io/guide/structural-directives

还有https://angular.io/guide/structural-directives#write-a-structural-directive

Answer 2

您可以使用TemplateRef和ViewContainerRef创建自定义*ngIf指令。例如：


@Directive({
    selector: '[claims]'
})
export class CustomNgIfDirective {

    constructor(
        private templateRef: TemplateRef<any>,
        private viewContainer: ViewContainerRef
    ){}

    @Input()
    set claims(claims) {
        let createEmbeddedView: boolean = false;

        if(claims) {
            if(Array.isArray(claims)) {
                createEmbeddedView = claims.every((passedClaim: string | number) => {
                    return claimExists(passedClaim);
                });
            } else {
                createEmbeddedView = claimExists(claims);
            }
        } else {
            createEmbeddedView = true;
        }

        if(createEmbeddedView) {
            this.viewContainer.createEmbeddedView(this.templateRef);
        }
    }

}

在html中：


<button *claims="'canSubmitClaim'">submit</button>

Answer 3

要获得对用户的基于角色的访问权限，可以使用身份验证保护服务。这是API链接https://angular.io/api/router/CanActivate。

有没有一种方法可以使用自定义角度指令应用ngIf“效果”？

3 个答案: