Angular2/Nativescript：将过去使用 LocalStorage 的服务转换为使用 nativescript-application/settings 的服务时出现问题

Question

我正忙于开发一个简单的条形码扫描器应用程序，并尝试将之前在 Web 应用程序中使用 LocalStorage 的服务转换为使用应用程序设置来保存本地 IP。该应用程序构建良好，但当它部署到 genymotion 模拟器时，出现以下错误。知道为什么会这样吗？因此，问题似乎出在应用程序设置的 getString and/or setString 方法上。我从一个使用 LocalStorage 的 Web 应用程序复制了一项服务，并将 localStorage 替换为 appSettings，将 getItem 替换为 getString 和 setString ... 我是否遗漏了 Nativescript 的 getString 和 setString 中的某些内容？我认为它的工作方式与 LocalStorage 浏览器完全相同 API...

我的错误：

JS: EXCEPTION: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: Unexpected token u in JSON at position 0
JS: ORIGINAL EXCEPTION: Unexpected token u in JSON at position 0
JS: ORIGINAL STACKTRACE:
JS: SyntaxError: Unexpected token u in JSON at position 0
JS:     at Object.parse (native)
JS:     at AppSettingsService.findLocalIP (/data/data/org.nativescript.barcodescanner/files/app/services/app-settings.service.js:19:25)
JS:     at AppComponent.ngOnInit (/data/data/org.nativescript.barcodescanner/files/app/app.component.js:13:42)
JS:     at Wrapper_AppComponent.detectChangesInInputProps (/AppModule/AppComponent/wrapper.ngfactory.js:18:53)
JS:     at DebugAppView._View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:30:26)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:9305:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:9410:48)
JS:     at ViewRef_.detectChanges (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:7398:24)
JS:     at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:6819:88
JS:     at Array.forEach (native)
JS: ERROR CONTEXT:
JS: [object Object]
JS: ns-renderer: ERROR BOOTSTRAPPING ANGULAR
JS: ns-renderer: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: Unexpected token u in JSON at position 0
JS:
JS: SyntaxError: Unexpected token u in JSON at position 0
JS:     at Object.parse (native)
JS:     at AppSettingsService.findLocalIP (/data/data/org.nativescript.barcodescanner/files/app/services/app-settings.service.js:19:25)
JS:     at AppComponent.ngOnInit (/data/data/org.nativescript.barcodescanner/files/app/app.component.js:13:42)
JS:     at Wrapper_AppComponent.detectChangesInInputProps (/AppModule/AppComponent/wrapper.ngfactory.js:18:53)
JS:     at DebugAppView._View_AppComponent_Host0.detectChangesInternal (/AppModule/AppComponent/host.ngfactory.js:30:26)
JS:     at DebugAppView.AppView.detectChanges (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:9305:18)
JS:     at DebugAppView.detectChanges (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:9410:48)
JS:     at ViewRef_.detectChanges (/data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:7398:24)
JS:     at /data/data/org.nativescript.barcodescanner/files/app/tns_modules/@angular/core/bundles/core.umd.js:6819:88
JS:     at Array.forEach (native)
8:46:00 AM - Compilation complete. Watching for file changes.

我的app.component.ts:

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from 'nativescript-angular/router';
import { RestService } from './services/rest.service';
import { AppSettingsService } from './services/app-settings.service';


@Component({
    selector: "main",
    template : "<page-router-outlet></page-router-outlet>"
})
export class AppComponent implements OnInit {

    constructor(private restService: RestService, private appSettingsService: AppSettingsService, private routerExtensions: RouterExtensions) {

    }

    ngOnInit() {
        let ip = this.appSettingsService.findLocalIP();
           if (ip !== null) {
               this.restService.init(ip);
           } else if (ip === null) {
               this.routerExtensions.navigate(['settings']);
        }
}

我的应用-settings.service:

import { Injectable } from '@angular/core';
import * as appSettings from 'application-settings';

@Injectable()
export class AppSettingsService {

saveLocalIP(ip: string): void {
  let localData = appSettings.getString('retail_mobile');
  if (localData) {
    localData = JSON.parse(localData);
  } else {
    localData = "";
 }
let saveData = {localIP:ip};
appSettings.setString('retail_mobile', JSON.stringify(saveData));   
}

findLocalIP() {
   let data = JSON.parse(appSettings.getString('retail_mobile'));
   if (data === null) {     
    console.log("No entry found in local storage...");
    return null;
   }

if(data && !data.localIP) {
    console.log("no local ip found in localStorage...")
    return null;
}

return data.localIP;
}

constructor() { }
}

Answer 1

您的 ngOnInit 正在调用服务中的方法 findLocalIP()，这就是错误发生的地方。

您的问题应该在以下行中：

let data = JSON.parse(appSettings.getString('retail_mobile'));

它正在尝试解析无法解析的内容。

这里的问题似乎是不匹配。 appSettings.getString 正在返回一个字符串，因此无法解析。通过删除 JSON.parse 应该可以解决问题。

let data = appSettings.getString('retail_mobile')

如果您 want/need 使用 JSON，这是我所期望的，您必须实际将其转换为 json 并以某种方式返回，例如如下所示。它不漂亮，但应该可以。

findLocalIP() {
   let d = appSettings.getString('retail_mobile'); // add
   let d1 = JSON.stringify(d); // make it json
   let data = JSON.parse(d1); // now parse it
   if (data === null) {     
    console.log("No entry found in local storage...");
    return null;
   }

只是举个例子 string/json:

retail_mobile = "{ something: "something" }" 这可能看起来像 JSON，但它不是，它是一个字符串。

如果您尝试 console.log(JSON.parse(retail_mobile))，它会抛出您所遇到的错误。

在解析之前，您实际上必须 JSON.stringify 它，因此按此顺序执行以下命令不会产生错误：

retail_mobile = "{ something: "something" }"
let data = JSON.stringify(retail_mobile); 
console.log(JSON.parse(data));

并作为对您的评论，指出错误指向 .js 文件。在运行时 TS 被编译为 JS，因此它不知道或不关心 TS 文件，因此错误指向 JS 文件。

Angular2/Nativescript：将过去使用 LocalStorage 的服务转换为使用 nativescript-application/settings 的服务时出现问题

Angular2/Nativescript: Issues converting a service that used to use LocalStorage to one that uses nativescript-application/settings

angular2-nativescript

angular