Question

我有导航：登录，注册等我已经在角度2中实施了Google注册，在我浏览Google之后，我希望我的导航在Logout等上动态更改。

我在[{1}}

中的导航

app.component.html

在我的app.component.ts中，我使用生命周期钩子ngDoCheck并检查localStorage。如果它不为空，我改变导航。

我的<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

当我通过Google进入时，页面会重定向到搜索页面，但导航无法更改。只有在单击徽标或其他菜单项后，菜单才会更改。

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(); }后开始。我真的不明白如何解决这个问题。我怎么能这样做？

此致

Answer 1

这是因为你在ngZone之外做了一些动作。要解决此问题首先导入ngZone：

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

然后将其注入进行谷歌登录异步调用的组件：

constructor(private zone: NgZone)

最后运行你在ngzone中回调中所做的所有angular2变量的处理：

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

如何在角度2

1 个答案: