Question

我有一个带有一些不同链接的标题。链接具有指令

[canAccess]处理用户是否有权查看该链接。

这来自我的app.component.ts

<div class="main-wrapper">
   <nav-bar (changeAccount)="changeAccount([$event])"  [accounts]="accounts" [activeAccountName]="activeAccountName" [userHasChanged]="userHasChanged" [isUserLoggedIn]="isUserLoggedIn" [userEmail]="userEmail" [userName]="userName" [impersonation]="impersonation"></nav-bar>

    <!--Main content-->
    <div class="main-content">
        <router-outlet></router-outlet>
    </div>
</div>

在这里，我有一个标题“ nav-bar”，其中包含许多不同的内容，但是其中一个链接如下所示：

<li [canAccess]="['isAdmin']" class="nav-item"><a class="nav-link" [routerLink]="['news']" routerLinkActive="active"><i class="icon-chat"></i>News</a></li>

这是navbar.component.ts：

import { Component, OnInit, Input, Output, EventEmitter, SimpleChanges, ChangeDetectionStrategy } from "@angular/core";

@Component({
    selector: "nav-bar",
    templateUrl: "./navbar.component.html"
})
export class NavbarComponent implements OnInit {

    @Input() userHasChanged: boolean;
    @Input() isUserLoggedIn: boolean;
    @Input() userName: string;
    @Input() userEmail: string;
    @Input() impersonation: { id: number, name: string };
    @Input() accounts: any[] = [];
    @Input() activeAccountName: string = "";

    @Output() changeAccount = new EventEmitter<number>();
    constructor() { }

    public ngOnInit() {
     var a = this.activeAccountName;
    }

    ngOnChanges(changes: SimpleChanges){
        if(changes.activeAccountName){
          console.log('input changed');
        }
    }
}

这是[canAccess]指令：

import { Directive, ElementRef, Input, Renderer, OnInit } from '@angular/core';

import { AuthenticationService } from "../services/authentication.service";

import { Claim } from "../models/claims";
import { AdminClaim } from "../models/admin-claims";
import { AccessRevokeType } from "../models/accessRevokeTypes";

@Directive({
    selector: '[canAccess]'
})
export class ElementClaimAccessDirective implements OnInit {
    private el: HTMLElement;
    private impersonation: { id: number, name: string };

    @Input("revokeType") revokeType: AccessRevokeType = AccessRevokeType.hide;
    @Input("canAccess") claims: Array<Claim | AdminClaim>;

    constructor(
        private elementRef: ElementRef,
        private authenticationService: AuthenticationService,
        private renderer: Renderer) {
    }

    ngOnInit() {
        this.el = this.elementRef.nativeElement;
        this.impersonation = this.authenticationService.impersonation();
        this.revokeElement();
    }

    public revokeElement() {
        if (!this.authenticationService.hasClaims(this.claims) && !this.impersonation) {
            switch (this.revokeType) {
                case AccessRevokeType.hide:
                    this.renderer.setElementStyle(this.el, "display", "none");
                    break;
                case AccessRevokeType.remove:
                    this.el.remove();
                    break;
                case AccessRevokeType.disable:
                    this.renderer.setElementAttribute(this.el, "disabled", "true");
                    break;
                default:
                    break;
            }
        }
        else if (this.revokeType == AccessRevokeType.show) {
            this.renderer.setElementStyle(this.el, "display", "none");
        }
    }
}

因此，当我在应用程序中更改帐户时，我会更新一些传递给导航栏组件的值。当这些值更改时，我希望组件重新呈现，以便[canAccess]指令再次触发并在我的标题中显示/隐藏正确的链接。

使用指令重新加载子组件

0 个答案: