Angular2. Comment cacher(sans rendu) le lien dans le menu après le contrôle d'accès?

Besoin de cacher le lien dans le menu basé sur les "routerLink" après le départ de l'ACL d'accès. Je ne veux pas utiliser angulaire directives "*ngIf" sur chaque élément de lien app (besoin de le faire globalement sur la routerConfig définition)

Contenu peut contrôler à l'aide de l'annotation @CanActivate sur les composants, mais besoin de cacher le lien dans le menu

J'essaie de le faire avec d'écraser "routerLink" directive, mais dans ce directives après l'écraser peux pas accéder à mon étend param défini(ressources et privilages) dans routerConfig

Exemple:

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

Mais ne peut pas obtenir l'accès à cette configuration, les données(routerData) dans le "routerLink".

Une idée comment faire?

Deuxième version

Multi menu de niveau et stiil avez un problème avec accès à la (étendre les données de configuration) à partir de routerConfig définition.

Composant principal

@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 {

}

Composant utilisateur

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

Élément de profil

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

}

Mon sécurisé directives

@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']);
    }
}

Cette solution ne fonctionne que pour l'enfant de l'élément de menu ne fonctionnent pas avec le niveau principal de menu, et pas sûr de ce travail est-il correctement sur le multi de niveau de menu.

J'ai essayer différentes façons de résoudre ce problème, j'ai essayer de faire de l'accès à la RouterConfig définition (et mon routerData étendre config) dans les directives et la vérification de l'élément par le nom d'alias de lien à l'aide de @Input('routerLink'), mais ne trouve pas comment puis-je obtenir l'accès à la RouterConfig.

OriginalL'auteur Power Web Design | 2016-03-16