角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") != ''); 
} 
} 

を