angular 2路由器更改网址无需重新加载答案

【问题标题】：angular 2 router change url without reloadangular 2路由器更改网址无需重新加载
【发布时间】：2016-04-27 19:51:33
【问题描述】：

我将 google 登录 javascript 翻译成打字稿，它有效，问题。

我遇到的是，当我在谷歌登录函数attachSignin() 中调用 _router 变量时，浏览器 url 会正确更改，但不会重定向页面，它只是停留在那里并且没有错误。

我已经尝试添加区域，但没有发生同样的情况，这里是代码

这是我的代码

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));
            });

    }

}

【问题讨论】：

标签： javascript angular angular2-routing

【解决方案1】：

您是否在其他任何地方“提供”ROUTER_PROVIDERS？除了在 Login 组件中，也许在 bootstrap(...[ROUTER_PROVIDERS]) 中？因为您只能在整个应用程序中提供一次。如果您多次提供它，您将在没有错误的情况下看到路由中的奇怪行为。

【讨论】：

【解决方案2】：

我希望这会抛出

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

如果你全部改变

function ()

到

() =>

并使用this 而不是self 并完全摆脱self 它应该可以工作。

【讨论】：