Angular2. Wie verstecke ich den Link im Menü, nachdem ich den Zugriff überprüft habe?

Notwendig, den Link im Menü basierend auf dem @ auszublend "routerLink" Nach Prüfung des Zugriffs auf die ACL. Ich möchte keine eckigen Direktiven verwenden "* ngIf" für jeden Elementlink in der App (muss global in der RouterConfig-Definition durchgeführt werden)

Content kann mit Annotation steuern@ CanActivate auf Komponenten, muss aber den Link im Menü @ verberg

Ich versuche das mit überschreiben "routerLink" Direktive, aber in diesen Direktiven kann nach dem Überschreiben nicht auf meine definierten Extends-Parameter (Ressourcen und Privilegien) in routerConfig @ zugegriffen werde

Beispiel

@Component({})
@RouteConfig([{   
    path: '/dashboard', 
    name: 'Dashboard', 
    component: DashboardComponent, 
    data: {'resource':'account', 'privilage':'show'} 
}])

Aber auf diese Konfigurationsdaten (routerData) im "routerLink" kann nicht zugegriffen werden.

Eine Idee, wie das geht?

Zweite Version

Multi level menu und stiil haben Probleme mit dem Zugriff auf die (Extend Data Config) von der RouterConfig-Definition.

Hauptkomponent

@RouteConfig([
    { path:'/dashboard',   name: 'DashboardLink',   component: DashboardComponent,  data: { res: 'dasboard', priv: 'show'}, useAsDefault: true },
    { path:'/user/...',    name: 'UserLink',        component: UserComponent,       data: { res: 'user', priv: 'show'} },
 ])

@Component({
    selector: 'main-app',
    template: `
            <ul class="left-menu">
                <li><a secured [routerLink]="['UserLink']">User</a>
                    <ul>
                        <li><a secured [routerLink]="['ProfileLink']">Profile</a></li>
                    </ul>
                </li>
                <li><a secured [routerLink]="['HomeLink']">Home</a></li>
                <li><a secured [routerLink]="['DashboardLink']">Dashboard</a></li>
            </ul>

            <router-outlet></router-outlet>
    `
})
export class MainComponent {

}

Benutzerkomponente

@RouteConfig([
    { path: '/profile', name: 'ProfileLink', component: ProfileComponent, data: {res: 'user', priv: 'details'} },
])
@Component({ ... })
export class UserComponent {
}

Profilkomponente

@Component({ ... })
export class ProfileComponent {

}

Meine sicheren Anweisungen

@Directive({
    selector: '[secured]'
})
export class SecuredDirective {

    @Input('routerLink')
    routeParams: any[];

    /**
     * 
     */
    constructor(private _viewContainer: ViewContainerRef, private _elementRef: ElementRef, private router:Router) {
    }

    ngAfterViewInit(){
        //Get access to the directives element router instructions (with parent instructions)
        let instruction = this.router.generate(this.routeParams);
            //Find last child element od instruction - I thing thats my component but I am not sure (work good with two levels of menu)
            this.getRouterChild(instruction);
    }

    private getRouterChild(obj: any){
        var obj1 = obj;
        while(true) {
            if( typeof obj1.child !== 'undefined' && obj1.child !== null ){
                obj1 = obj1.child;
            } else {
                break;
            }  
        }
        this.checkResPrivAcl(obj1.component.routeData.data)
    }
    private checkResPrivAcl(aclResAndPriv: any){

        let hasAccess = CommonAclService.getInstance().hasAccess(aclResAndPriv['res'], aclResAndPriv['priv']);

        if (!hasAccess) {
            let el : HTMLElement = this._elementRef.nativeElement;
            el.parentNode.removeChild(el);   
        }

        console.log("CHECK ACL: " + aclResAndPriv['res'] + " | " + aclResAndPriv['priv']);
    }
}

Diese Lösung funktioniert nur für untergeordnete Menüelemente. Sie funktioniert nicht mit der Hauptebene des Menüs und ist nicht sicher, ob dies im Menü mit mehreren Ebenen korrekt funktioniert.

Ich versuche, dieses Problem auf andere Weise zu lösen. Ich versuche, in den Direktiven auf die RouterConfig-Definition (und meine RouterData-Erweiterungskonfiguration) zuzugreifen, und überprüfe das Element anhand des Aliasnamens des Links mithilfe von @ Input ('routerLink') kann aber nicht finden, wie ich auf die RouterConfig zugreifen kann.

Antworten auf die Frage(4)

Ihre Antwort auf die Frage