如何在角度2中實現更改菜單

我有一個導航：登錄，註冊等。我已經實現了使用Google在角度2中註冊並在我通過Google之後註冊我希望我的導航可以動態更改註銷等如何在角度2中實現更改菜單

我在app.component.html

<ul id="navigation-menu"> 
    <li routerLinkActive="active"><a routerLink="/about">About</a></li> 
    <li routerLinkActive="active"><a routerLink="/contact_us">Contact us</a></li> 
    <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="logged"> 
     <a routerLink="/login" class="loginLink">Log in</a> 
    </li> 
    <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="logged"> 
     <a routerLink="/signin" class="signLink">Sign up</a> 
    </li> 
    <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="!logged"> 
     <a routerLink="/uprofile">Profile</a> 
    </li> 
    <li routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" *ngIf="!logged"> 
     <a routerLink="/bprofile">BProfile</a> 
    </li> 
    <li *ngIf="!logged"><a routerLink="/login" class="loginLink" (click)="logout()">Logout</a></li> 
</ul>

在我app.component.ts導航我使用的生命週期掛鉤ngDoCheck和檢查localStorage的。如果它不是空的，我改變導航。

我app.component.ts

export class AppComponent implements DoCheck { 
    logged: boolean = true; 

    changeMenuLink() { 
     if (localStorage.getItem("currentUser")) { 
      this.logged = false; 
     } 
    } 

    ngDoCheck() { 
     this.changeMenuLink(); 
    }

當我通過谷歌進入，頁面重定向到搜索頁面，但資產淨值不會改變。只有在點擊徽標或其他菜單項後，菜單纔會更改。

fb-gplus-api.component.ts

public auth2: any; 
    public googleInit() { 
     gapi.load('auth2',() => { 
      this.auth2 = gapi.auth2.init({ 
       client_id: 'APP_ID.apps.googleusercontent.com', // your-app-id 
       cookiepolicy: 'single_host_origin', 
       scope: 'profile email' 
      }); 
      this.attachSignin(document.getElementById('googleBtn')); 
     }); 
    } 

    public attachSignin(element) { 
     this.auth2.attachClickHandler(element, {}, 
      (googleUser) => { 
       let profile = googleUser.getBasicProfile(); 
       let userToken: SocialLogin = new SocialLogin(); 
       userToken.uid = profile.getId(); 
       userToken.token = googleUser.getAuthResponse().id_token; 
       this.httpToken.postToken(userToken) 
        .toPromise() 
        .then(resp => { 
         if (resp.status === 'OK') { 
          this.checkStatus(userToken); 
         } 
        }) 
      }, 
      (error) => { 
       alert(JSON.stringify(error, undefined, 2)); 
      } 
     ); 
    } 

    checkStatus(user) { 
     let token = this.randomToken.generateToken(40); 
     localStorage.setItem('currentUser', JSON.stringify({uid: user.uid, token: token})); 
     alert("Login success! Have a nice day!"); 
     this.router.navigate(['/search']); 
    } 

    ngAfterViewInit(){ 
     this.googleInit(); 
    }

我認爲使用ngAfterViewInit()後菜單的變化的問題開始。我真的不明白如何解決這個問題。我怎樣才能做到這一點？

Regards

來源

2017-02-27 Alexander

這是因爲您在ngZone之外做某些操作而發生的。爲了解決這個問題，首先導入ngZone：

import {NgZone} from "@angular/core";

然後將其注入到組件，這樣做的異步調用的谷歌登錄：

constructor(private zone: NgZone)

最後請運行在回調中ngzone做所有angular2變量的處理：

(googleUser) => { 
    this.zone.run(() => { 
      .... 
    }); 
}

來源

2017-02-27 10:07:23 laser

您已經幫了我很大的忙！非常感謝！你能否詳細解釋一下ngZone或者提供可以閱讀的地方的鏈接。 – Alexander

@Alexander有很多有用的教程，基本上我會建議其中的兩個：1）https://www.youtube.com/watch?v=3IqtmUscE_U這真的很棒，然後更接近於現在的angular2： 2）https://blog.thoughtram.io/angular/2016/02/01/zones-in-angular-2.html – laser

@亞歷山大如果這回答你的問題，檢查答案 – laser

如何在角度2中實現更改菜單

回答

相關問題