如何在角度2中实现更改菜单 [英] How to implement the change menu in angular 2

问题描述

我有一个导航:登录，注册等.我已经实现了在角度2中与Google签约，并且在通过Google后，我希望我的导航在注销等时动态更改.

I have a navigation: Log in, Sign up, etc. I have implemented sign up with Google in angular 2 and after I go through Google I want that my navigation dynamically changed on Logout, etc.

我在 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.如果不为空，则更改导航.

In my app.component.ts I use lifecycle hook ngDoCheck and check localStorage. If it is not empty, I change navigation.

我的 app.component.ts

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

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

    ngDoCheck() {
        this.changeMenuLink();
    }

当我通过Google输入时，页面会重定向到搜索页面，但导航不会改变.仅在单击徽标或其他菜单项后，菜单才会更改.

When I enter via Google, page redirect to the search page, but nav doesn't change. Menu changes only after clicking on the logo or on another menu item.

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()后，菜单更改问题开始出现.我真的不明白如何解决这个问题.我该怎么办?

I think the problem with the change of menu starts after use ngAfterViewInit(). I really don't understand how to solve this problem. How can I do this?

致谢

推荐答案

之所以会发生这种情况，是因为您正在ngZone之外执行某些操作.要解决此问题，请先导入ngZone:

That's happen because you are doing some action outside of ngZone. To solve this issue first import ngZone:

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

然后将其注入对Google登录进行异步调用的组件中

then inject it into component that doing async call for google login:

constructor(private zone: NgZone)

最后处理您在ngzone内的回调中所做的所有angular2变量的处理:

finally run the handling of all angular2 variables that you doing in callback inside ngzone:

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

这篇关于如何在角度2中实现更改菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！