angular2：来自注入服务的奇怪空错误

Question

我有一个非常基本的网络应用程序，它有一个Home component，它使用localStorage 服务来检查是否已设置本地 IP。如果尚未设置本地 IP，则必须导航到可以输入本地 IP 的设置页面。当我运行我的应用程序（使用 ng-cli）时，出现以下错误。似乎即使我在constructor 中注入了localStorageService，但由于某种原因它是null……知道可能出了什么问题吗？

我的error:

main.bundle.js:42342
EXCEPTION: Uncaught (in promise): Error: Error in ./HomeComponent class HomeComponent_Host - inline template:0:0 caused by: Cannot read property 'localIP'
of null
TypeError: Cannot read property 'localIP' of null
    at LocalStorageService.getLocalIP (
http://localhost:4200/main.bundle.js:64378:18)
    at HomeComponent.ngOnInit (
http://localhost:4200/main.bundle.js:64008:46)
    at Wrapper_HomeComponent.detectChangesInInputProps (/AppModule/HomeComponent/wrapper.ngfactory.js:18:53)
    at _View_HomeComponent_Host0.detectChangesInternal (/AppModule/HomeComponent/host.ngfactory.js:30:27)
    at _View_HomeComponent_Host0.AppView.detectChanges (
http://localhost:4200/main.bundle.js:59869:14)
    at _View_HomeComponent_Host0.DebugAppView.detectChanges (
http://localhost:4200/main.bundle.js:59974:44)
    at ViewRef_.detectChanges (
http://localhost:4200/main.bundle.js:43438:20)
    at RouterOutlet.activate (
http://localhost:4200/main.bundle.js:46946:42)
    at ActivateRoutes.placeComponentIntoOutlet (
http://localhost:4200/main.bundle.js:15157:16)
    at ActivateRoutes.activateRoutes (
http://localhost:4200/main.bundle.js:15135:22)

我的HomeComponent:

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { RestService } from '../../services/rest.service';
import { LocalStorageService } from '../../services/local-storage.service';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private restService: RestService, private localStorageService: LocalStorageService, private router: Router) {
this.localStorageService = new LocalStorageService();     
}

  ngOnInit() {    
      let ip = this.localStorageService.getLocalIP();
      if (!ip.length > 0) {
          this.router.navigate(['settings']);
      }
      console.log(this.localStorageService.getLocalIP());  


  }

}

我的LocalStorageService:

import { Injectable } from '@angular/core';

@Injectable()
export class LocalStorageService {

saveLocalIP(ip: string): void {
    let localData = localStorage.getItem('retail_mobile');
    if (localData) {
        localData = JSON.parse(localData);
    } else {
        localData = "";
    }

    localData = "{localIP:" + ip + "}";
    localStorage.setItem('retail_mobile', JSON.stringify(localData));   
}

getLocalIP() {
    let data = JSON.parse(localStorage.getItem('retail_mobile'));
    if (!data.localIP) {        
        console.log("No local IP found in local storage...");
        return '';
    }

    return data.localIP;
}

  constructor() { }

}

Answer 1

我认为问题出在 getLocalIP() 函数中。

getLocalIP() {
    let data = JSON.parse(localStorage.getItem('retail_mobile'));
    ................
    ................
}

你得到的数据是 null。因此，再多做一次检查并针对 null 验证数据。

if (data && !data.localIP)

Answer 2

我猜你打算只使用

localData = {localIP: ip };

在saveLocalIP

Answer 3

无需创建新的服务实例 remove this.localStorageService = new LocalStorageService();

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { RestService } from '../../services/rest.service';
import { LocalStorageService } from '../../services/local-storage.service';

@Component({
  selector: 'home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor(private restService: RestService, private localStorageService: LocalStorageService, private router: Router) {

}

  ngOnInit() {    
      let ip = this.localStorageService.getLocalIP();
      if (!ip.length > 0) {
          this.router.navigate(['settings']);
      }
      console.log(this.localStorageService.getLocalIP());  


  }

}