angular 2 路由器更改 url 无需重新加载
angular 2 router change url without reload
我将 google sign in javascript 翻译成 typescript,并且有效,这个问题。
我遇到的是当我在 google 登录函数中调用 _router 变量时 attachSignin()
浏览器 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));
});
}
}
你 "provide" ROUTER_PROVIDERS
还有其他地方吗?除了 Login
组件之外,也许在 bootstrap(...[ROUTER_PROVIDERS])
中?因为您只能在整个应用程序中提供一次。如果你多次提供它,你会在没有错误的情况下看到路由中的奇怪行为。
我希望这会抛出
this.zoneImpl.run(() => this._router.navigate(['Polls']));
如果全部改变
function ()
到
() =>
并使用 this
而不是 self
并完全摆脱 self
它应该可以工作。
我将 google sign in javascript 翻译成 typescript,并且有效,这个问题。
我遇到的是当我在 google 登录函数中调用 _router 变量时 attachSignin()
浏览器 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));
});
}
}
你 "provide" ROUTER_PROVIDERS
还有其他地方吗?除了 Login
组件之外,也许在 bootstrap(...[ROUTER_PROVIDERS])
中?因为您只能在整个应用程序中提供一次。如果你多次提供它,你会在没有错误的情况下看到路由中的奇怪行为。
我希望这会抛出
this.zoneImpl.run(() => this._router.navigate(['Polls']));
如果全部改变
function ()
到
() =>
并使用 this
而不是 self
并完全摆脱 self
它应该可以工作。