Question

我有一个非常基本的网络应用程序，其Home component使用localStorage服务来检查是否已设置本地IP。如果尚未设置本地IP，则必须导航到可以输入本地IP的设置页面。当我运行我的应用程序（使用ng-cli）时，我收到以下错误。似乎即使我出于某种原因在localStorageService constructor中注入了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

我猜你只想使用

localData = {localIP: ip };

saveLocalIP

中的

Answer 2

我认为问题出在 getLocalIP（）函数中。

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

您获取的数据为 null 。因此，再添加一项检查并验证数据是否为空。

if (data && !data.localIP)

Answer 3

无需创建新的服务实例，只需删除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());  


  }

}

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

3 个答案: