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
您已經幫了我很大的忙!非常感謝! 你能否詳細解釋一下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