如何在Angular 2中隐藏和显示菜单

Question

当令牌为空时，我可以隐藏一些菜单，但是如果不刷新页面就无法做到这一点。

那就是我已经拥有的代码：

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
    <div><h2>{{resultcooki}}</h2></div>
    <nav>
    <div *ngIf="token!=''"> 
    <a [routerLink]="['/all']" routerLinkActive="active" >All</a>
    <a [routerLink]="['/one']" >ONE</a>
    <a [routerLink]="['/post']" >Post</a>
    </div>
    <a [routerLink]="['/login']" >Login</a>
    </nav>
    <router-outlet></router-outlet>`,
    directives:[ROUTER_DIRECTIVES],
    providers: [SymfonyService]

})

export class AppComponent {
  title = 'Test';
  token:string = this.getCookie("Cookie");

   private getCookie(name: string) {
     let ca: Array<string> = document.cookie.split(';');
     let caLen: number = ca.length;
     let cookieName = name + "=";
     let c: string
     for (let i: number = 0; i < caLen; i += 1) {
         c = ca[i].replace(/^\s\+/g, "");
         if (c.indexOf(cookieName) == 0) {
             return c.substring(cookieName.length, c.length);
         }
     }
     return "";
 }

}

有什么帮助吗？

Answer 1

那是因为令牌在页面加载时初始化了它的值，这就是为什么需要刷新页面的原因。

我建议您添加一个函数来检查this.getCookie（“ Cookie”）; 值，而不是直接检查令牌变量值。

尝试类似：

@Component({
    selector: 'my-app',
    template: `<h1>{{title}}</h1>
    <div><h2>{{resultcooki}}</h2></div>
    <nav>
    <div *ngIf="showMenu()"> 
    <a [routerLink]="['/all']" routerLinkActive="active" >All</a>
    <a [routerLink]="['/one']" >ONE</a>
    <a [routerLink]="['/post']" >Post</a>
    </div>
    <a [routerLink]="['/login']" >Login</a>
    </nav>
    <router-outlet></router-outlet>`,
    directives:[ROUTER_DIRECTIVES],
    providers: [SymfonyService]

})

export class AppComponent {
title = 'Test';

private getCookie(name: string) {
    let ca: Array<string> = document.cookie.split(';');
    let caLen: number = ca.length;
    let cookieName = name + "=";
    let c: string
    for (let i: number = 0; i < caLen; i += 1) {
        c = ca[i].replace(/^\s\+/g, "");
        if (c.indexOf(cookieName) == 0) {
            return c.substring(cookieName.length, c.length);
        }
    }
    return "";
}
showMenu(){
    return (this.getCookie("Cookie") != '');
}
}