Есть ли способ использовать пользовательскую директиву Angular для применения "эффекта" ngIf?

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

Вы можете использовать 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 2

Да, это так. Вы можете использовать структурную директиву для этой цели. Это очень просто и может использоваться таким образом *appIfRole="". Точно так же, как *ngIf.

Просто укажите этот URL - https://angular.io/guide/structural-directives

И https://angular.io/guide/structural-directives#write -a-структурная директива

Answer 3

Для доступа к ролевой базе пользователю вы можете воспользоваться службой аутентификации. Это ссылка API https://angular.io/api/router/CanActivate.