如何在角度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中实现更改菜单

回答

相关问题