[英]angular2 cannot navigate with router
I am trying to navigate to another route after users click a login button. 用户单击登录按钮后,我试图导航到另一条路线。 But I can't understand what went wrong. 但是我不明白出了什么问题。 Below is my login component. 以下是我的登录组件。
import { Component, OnInit } from '@angular/core'; import { AngularFire, AuthProviders, AuthMethods } from 'angularfire2'; import { Router, ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-login', templateUrl: './login.component.html', styleUrls: ['./login.component.css'] }) export class LoginComponent implements OnInit { constructor(public af: AngularFire, private router: Router) { this.af.auth.subscribe(auth => console.log(auth)); } login() { this.af.auth.login({ provider: AuthProviders.Google, method: AuthMethods.Popup, }).then(function(res) { console.log('login success'); console.log(res.uid); this.router.navigateByUrl('/main') // .then(r => console.log('then: ' + r)) .then(function(resw) { console.log('has redirect'); }) .catch(err => console.error(err)) ; console.log('afterward'); }).catch(err => console.error(err)); } overrideLogin() { this.af.auth.login({ provider: AuthProviders.Anonymous, method: AuthMethods.Anonymous, }); } ngOnInit() { } }
<p> login works! </p> <button (click)="login()">Login With Google</button> <button (click)="overrideLogin()">Login Anonymously</button>
Here is my routes: 这是我的路线:
import { LoginComponent } from './login/login.component';
import { MainComponent } from './main/main.component';
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router' ;
const APP_ROUTES: Routes = [
{ path: 'login', component: LoginComponent },
{ path: '', pathMatch: 'full', redirectTo: '/login'},
{ path: 'main', component: MainComponent }
];
export const appRoutingProviders: any[] = [
];
export const APP_ROUTES_PROVIDER: ModuleWithProviders = RouterModule.forRoot(APP_ROUTES);
Here is the @NgModule: 这是@NgModule:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
// import routing
import { appRoutingProviders, APP_ROUTES_PROVIDER } from './app.routes' ;
@NgModule({
declarations: [
AppComponent,
LoginComponent,
MainComponent
],
imports: [
BrowserModule,
// AngularFireModule.initializeApp(firebaseConfig, myFirebaseAuthConfig), // angularfire setup
FormsModule,
HttpModule,
APP_ROUTES_PROVIDER
],
providers: [appRoutingProviders],
bootstrap: [AppComponent]
})
export class AppModule { }
I got the following error. 我收到以下错误。 Can someone please help let me know how to fix this? 有人可以帮忙让我知道如何解决此问题吗?
TypeError: this is null Stack trace: LoginComponent</LoginComponent.prototype.login/<@http://localhost:4200/main.bundle.js:70294:13 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:69125:19 NgZoneImpl/this.inner<.onInvoke@http://localhost:4200/main.bundle.js:56178:28 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invoke@http://localhost:4200/main.bundle.js:69124:19 Zone$1</Zone</Zone.prototype.run@http://localhost:4200/main.bundle.js:69018:24 scheduleResolveOrReject/<@http://localhost:4200/main.bundle.js:69384:52 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:69158:23 NgZoneImpl/this.inner<.onInvokeTask@http://localhost:4200/main.bundle.js:56169:28 Zone$1</ZoneDelegate</ZoneDelegate.prototype.invokeTask@http://localhost:4200/main.bundle.js:69157:23 Zone$1</Zone</Zone.prototype.runTask@http://localhost:4200/main.bundle.js:69058:28 drainMicroTaskQueue@http://localhost:4200/main.bundle.js:69290:25 ZoneTask/this.invoke@http://localhost:4200/main.bundle.js:69230:25
Arrow Function(()=>) will resolve issue as every configuration is correct. 箭头函数(()=>)将解决问题,因为每个配置都是正确的。
login() {
this.af.auth.login({
provider: AuthProviders.Google,
method: AuthMethods.Popup,
}).then((res)=> { //<----changed this line
console.log('login success');
console.log(res.uid);
this.router.navigateByUrl('/main') // .then(r => console.log('then: ' + r))
.then((resw)=> { //<----changed this line
console.log('has redirect');
})
.catch(err => console.error(err)) ;
console.log('afterward');
}).catch(err => console.error(err));
}
this
is special in javascript, it depends how the function was called see How to access the correct `this` context inside a callback? this
在javascript中很特殊,它取决于函数的调用方式,请参阅如何在回调函数中访问正确的`this`上下文? . 。
In type script if you use a fat arrow =>
it'll cache the this for you eg this.af.auth.login({}).then((res) => {})
在类型脚本中,如果您使用this.af.auth.login({}).then((res) => {})
箭头=>
它将为您缓存此内容,例如this.af.auth.login({}).then((res) => {})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.