angular 2 router change url without reload

Question

I translate google sign in javascript to typescript, and it works, the issue.

I'm having is when I call _router variable inside the google sign in function attachSignin() the browser url changes correctly but does not redirect the page it just stays there and gives no error.

I already try to add zones but nothin happen just the same here is the code

this is my code

import {Component, NgZone} from "angular2/core";
import {ToastsManager } from 'ng2-toastr/ng2-toastr';
import {Router, ROUTER_PROVIDERS} from 'angular2/router'

// Google's login API namespace
declare var gapi: any;

@Component({
    selector: "sous-app",
    templateUrl: "app/login/login.html",
    providers: [ToastsManager, ROUTER_PROVIDERS]
})
export class Login {
    googleLoginButtonId = "google-login-button";
    userAuthToken = null;
    userDisplayName = "empty";
    auth2 = null;
    self = this;


        zoneImpl: NgZone;

constructor(zone: NgZone, private _router: Router) {
    this.zoneImpl = zone;
}

    // Angular hook that allows for interaction with elements inserted by the
    // rendering of a view.
    ngAfterViewInit() {
        var loginProxy = $.proxy(this.attachSignin, this);
        var redirectToPolls = $.proxy(this.redirectToPolls, this);
        gapi.load('auth2', function () {
            // Retrieve the singleton for the GoogleAuth library and set up the client.
            self.auth2 = gapi.auth2.init({
                client_id: '718161509287-jdpqsuebcoteh847krjn0m1odnbo5i3q.apps.googleusercontent.com',
                cookiepolicy: 'single_host_origin',
                // Request scopes in addition to 'profile' and 'email'
                //scope: 'additional_scope'
            });
            loginProxy(document.getElementById('customBtn'));
        });

    }


    attachSignin = (element) => {

        var navigate = false;
        console.log(element.id);
        self.auth2.attachClickHandler(element, {},
            (googleUser) => { {

                var profile = googleUser.getBasicProfile();
                console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
                console.log('Name: ' + profile.getName());
                console.log('Image URL: ' + profile.getImageUrl());
                console.log('Email: ' + profile.getEmail());

                //HERE I WANT TO REDIRECT ROUTER
                this.zoneImpl.run(() => this._router.navigate(['Polls']));



                console.log(googleUser.getAuthResponse().id_token);



            }, function (error) {
                alert(JSON.stringify(error, undefined, 2));
            });

    }

}

Abdulrahman Alsoghayer · Accepted Answer · 2016-04-28 02:26:38Z

2

Did you "provide" ROUTER_PROVIDERS anywhere else? other than in the Login component, perhaps in bootstrap(...[ROUTER_PROVIDERS]) ? because you can provide it only once across the whole app. If you provide it multiple times, you will see strange behavior in routing without errors.

edited Apr 28, 2016 at 2:26

answered Apr 28, 2016 at 1:42

Abdulrahman Alsoghayer

16.6k7 gold badges53 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-04-28 05:18:27Z

0

I would expect this to throw

this.zoneImpl.run(() => this._router.navigate(['Polls']));

If you change all

function ()

to

() =>

and use this instead of self and get rid of self entirely it should work.

answered Apr 28, 2016 at 5:18

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

angular 2 router change url without reload

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related