angular2无法使用路由器导航

Question

我想在用户单击登录按钮后导航到另一条路线。但我不明白哪里出了问题。以下是我的登录组件。

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>

这里是我的路线：

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

这里是@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 { } 

我得到了下面的错误。有人可以帮助让我知道如何解决这个问题吗？

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

Answer 1

Arrow功能（（）=>）将解决问题，因为每个配置是正确的。

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

Answer 2

this是在JavaScript特殊的，这取决于该函数是怎么被调用看到How to access the correct `this` context inside a callback?。

在类型的脚本，如果你使用的脂肪箭头=>它会缓存这个给你，例如this.af.auth.login({}).then((res) => {})