如何隱藏和顯示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") != ''); 
} 
}