TypeError: Невозможно прочитать свойство '_router' из null в NativeScript

Question

Я работаю над Android-приложением, используя NativeScript + AngularJS2 + TypeScript. После их документа - http://docs.nativescript.org/angular/tutorial/ng-chapter-0.

Попал в точку, когда после успешного входа пользователю необходимо перенаправить на страницу List. Следуя их разделу маршрутизации сейчас - http://docs.nativescript.org/angular/tutorial/ng-chapter-3#35-routing

Сделано все в соответствии с их документом. Вот мои коды -

app.component.ts

import {ListPage} from "./pages/list/list.component"; 
import {Component} from "@angular/core"; 
import {RouteConfig} from "@angular/router-deprecated"; 
import {NS_ROUTER_DIRECTIVES, NS_ROUTER_PROVIDERS} from "nativescript-angular/router"; 
import {LoginPage} from "./pages/login/login.component"; 

@Component({ 
    selector: "main", 
    directives: [NS_ROUTER_DIRECTIVES], 
    providers: [NS_ROUTER_PROVIDERS], 
    template: "<page-router-outlet></page-router-outlet>" 
}) 
@RouteConfig([ 
    { path: "/Login", component: LoginPage, name: "Login", useAsDefault: true }, 
    { path: "/List", component: ListPage, name: "List" } 
]) 
export class AppComponent {} 

user.service.ts

import {Injectable} from "@angular/core"; 
import {User} from "./user"; 
import {ConfigService} from "../config"; 
import firebase = require("nativescript-plugin-firebase"); 

@Injectable() 
export class UserService { 

    register(user: User, config: ConfigService) { 

     console.log('Email entered : '+user.email); 
     console.log('Password entered : '+user.password); 
     console.log("API url going to use is : "+config.apiUrl); 

     firebase.init(<any>{ 
      persist: true, // Allow disk persistence. Default false. 
      url: config.apiUrl 
     }).then(
      function (instance) { 
       console.log("firebase.init done"); 
      }, 
      function (error) { 
       console.log("firebase.init error: " + error); 
      } 
     ); 

     return firebase.createUser({ 
      email: user.email, 
      password: user.password 
      }).then(
       function (response) { 
       console.log(response); 
       return response; 
       } 
     ) 

    } 

    login(user: User, config: ConfigService) { 

     firebase.init({ 
      persist: true, // Allow disk persistence. Default false. 
      url: config.apiUrl 
     }).then(
      function (instance) { 
       console.log("firebase.init done"); 
      }, 
      function (error) { 
       console.log("firebase.init error: " + error); 
      } 
     ); 

     return firebase.login({ 
      type: firebase.LoginType.PASSWORD, 
      email: 'eddyverbruggen@gmail.com', 
      password: 'firebase' 
      }).then(
       function (response) { 
       console.log(response); 
       return response; 
       } 
     ) 

    } 

} 

login.component.ts

import {Router} from "@angular/router-deprecated"; 
import {Component} from "@angular/core"; 
import {User} from "../../shared/user/user"; 
import {UserService} from "../../shared/user/user.service"; 
import {ConfigService} from "../../shared/config"; 
import {HTTP_PROVIDERS} from "@angular/http"; 
import firebase = require("nativescript-plugin-firebase"); 

@Component({ 
    selector: "my-app", 
    providers: [UserService, HTTP_PROVIDERS,ConfigService], 
    templateUrl: "pages/login/login.html", 
    styleUrls: ["pages/login/login-common.css", "pages/login/login.css"] 
}) 

export class LoginPage { 
    user: User; 
    isLoggingIn = true; 
    config:any; 

    constructor(private _router: Router, private _userService: UserService) { 
     this.user = new User(); 
     this.config = new ConfigService(); 
    } 

    submit() { 
     if (this.isLoggingIn) { 
      this.login(); 
     } else { 
      this.signUp(); 
     } 
    } 


    login() { 

     var result = this._userService.login(this.user,this.config); 

     result.then(
      function (result) { 
       console.log("Login Successs"); 
       // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token 
       var response = JSON.stringify(result); 
       console.log('Login Response : '+response); 

       // Route to list page 
       this._router.navigate(["List"]); 
      }, 
      function (errorMessage) { 
       console.log("Login Error"); 
       console.log(errorMessage); 
      } 
     ); 
    } 

    signUp() { 
     var result = this._userService.register(this.user,this.config); 

     result.then(
      function (result) { 
       // dialogs.alert({ 
       // title: "User created", 
       // message: "userid: " + result.key, 
       // okButtonText: "Nice!" 
       // }) 
       console.log('User Object Info : '+JSON.stringify(result)); 
       console.log('User Created with user id - '+result.key); 
       alert("Your account was successfully created."); 

       this.toggleDisplay(); 
      }, 
      function (errorMessage) { 
       // dialogs.alert({ 
       // title: "No user created", 
       // message: errorMessage, 
       // okButtonText: "OK, got it" 
       // }) 
       console.log('No user created. Got error message insted - '+errorMessage); 
       alert("Unfortunately we were unable to create your account.") 
      } 
     ); 


    } 

    toggleDisplay() { 
     this.isLoggingIn = !this.isLoggingIn; 
    } 
} 

Все workign штраф за исключением времени выполнения this._router.navigate(["List"]); из файла login.component.ts Я получаю следующее сообщение об ошибке

JS: EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '_router' of null 

Может не в состоянии понять, что именно ошибка.

С уважением

Answer 1

Я ожидаю, что эта проблема связана с проблемами области контекста. Я думаю, вы должны попытаться захватить сферу, прежде чем вы будете божественны в свое время. Я обычно хранить это в переменной с именем that смотрите ниже (и увидеть комментарии):

login() { 

    var result = this._userService.login(this.user,this.config); 
    var that = this; //store the current context 
    result.then(
     function (result) { //context (this has changed) 
      console.log("Login Successs"); 
      // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token 
      var response = JSON.stringify(result); 
      console.log('Login Response : '+response); 

      // Route to list page 
      that._router.navigate(["List"]); //reference _router from the original scope 
     }, 
     function (errorMessage) { 
      console.log("Login Error"); 
      console.log(errorMessage); 
     } 
    ); 
} 

Answer 2

Да, вы можете динамически связать this, как Джордж Эдвардс указал. Другим вариантом является использование функций стрелок, которые позволят вам сохранить область действия вызывающего объекта внутри функции, так что вам не нужно всегда помнить о записи var that = this.

login() { 

    var result = this._userService.login(this.user,this.config); 
    result.then(
     // Within the arrow function 'this' now refers to the lexical context rather than changing depending upon how the function is called. 
     (result) => { 
      console.log("Login Successs"); 
      // the result object has these properties: uid, provider, expiresAtUnixEpochSeconds, profileImageURL, token 
      var response = JSON.stringify(result); 
      console.log('Login Response : '+response); 

      // Route to list page 
      this._router.navigate(["List"]); //reference _router from the original scope 
     }, 
     // Arguably clearer 
     (errorMessage) => { 
      console.log("Login Error"); 
      console.log(errorMessage); 
     } 
    ); 
}