Nativescript Singleton类不使用组件导航

我正在尝试创建一个singleton类，这样就可以避免再次打开同一个数据库

我读过关于使用静态变量创建类提供程序以便保持不变的内容，但我看到每次导航到另一个组件时，静态变量内容都会丢失

这是到目前为止我的代码

couchbase.service.ts

import { Injectable } from "@angular/core";
import { Couchbase } from "nativescript-couchbase";
import * as connection from "tns-core-modules/connectivity";
import { isAndroid } from "platform";

@Injectable()
export class CouchbaseService {
    private static database: any;

    constructor() {
        console.log("enter constructor")
    }

    public static init(){
        if(!CouchbaseService.database) {
            console.log("enter init")
            CouchbaseService.database = new Couchbase("data");
        }
        return CouchbaseService.database;
    }

    public getDatabase() {
        return CouchbaseService.database;
    }
    ...

}

app.component.ts

：我已经了解到，从父类调用

init

将使应用程序为子类保留它（注意，我还尝试将

CouchbaseService

作为构造函数参数传递，将方法

init

更改为非静态）

在我的

app.module.ts

文件中，我将

CouchbaseService

添加到

providers

列表中

import { NgModule, ErrorHandler, NO_ERRORS_SCHEMA } from "@angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUIListViewModule } from "nativescript-ui-listview/angular";
import { NativeScriptUISideDrawerModule } from "nativescript-ui-sidedrawer/angular";
import { NativeScriptHttpModule } from "nativescript-angular/http";
import { Http } from "@angular/http";
import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { registerElement } from 'nativescript-angular/element-registry';
import { CardView } from 'nativescript-cardview';
import { AppRoutingModule } from "./app.routing";
import { AppComponent } from "./app.component";

import { CouchbaseService } from "./services/couchbase.service";


import { HomeComponent } from "./components/home/home.component";
registerElement('CardView', () => CardView);
registerElement("MapboxView", () => require("nativescript-mapbox").MapboxView);
registerElement("Fab", () => require("nativescript-floatingactionbutton").Fab);

@NgModule({
    bootstrap: [
        AppComponent
    ],
    imports: [
        NativeScriptModule,
        NativeScriptUIListViewModule,
        NativeScriptUISideDrawerModule,
        AppRoutingModule,
        NativeScriptUIDataFormModule,
        NativeScriptFormsModule,
        NativeScriptHttpModule
    ],
    declarations: [
        AppComponent,
        HomeComponent
    ],
    providers: [
        CouchbaseService,
    ],
    schemas: [
        NO_ERRORS_SCHEMA
    ],
    entryComponents: [
    ],
})
/*
Pass your application module to the bootstrapModule function located in main.ts to start your app
*/
export class AppModule { }

当我查看终端中的日志时，似乎每次导航到另一个组件时服务都会重新启动，因此它会释放

数据库的值

我将NativeScript 4与Angular 5和TypeScript 2.7.2一起使用。
这不是应该如何使用单例服务。让我们这样做：

更改您的服务如下：

import { Injectable } from "@angular/core";
import { Couchbase } from "nativescript-couchbase";
import * as connection from "tns-core-modules/connectivity";
import { isAndroid } from "platform";

@Injectable()
export class CouchbaseService {

    private database: any;

    constructor() {
        console.log("enter constructor")
        this.init();
    }

    private init(){
        if(!this.database) {
            console.log("enter init")
            this.database = new Couchbase("data");
        }
    }

    public getDatabase() {
        return this.database;
    }
    ...

}

@NgModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CouchbaseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from "@angular/core";
import * as Platform from "platform";
import { CouchbaseService } from './services/couchbase.service';

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent { 
    constructor(private service: CouchbaseService) {
        console.log(this.service.getDatabase());
    }
}

在
AppModule
[或您提供服务的模块]中，在
@NgModule
的提供程序数组中指定服务，如下所示：

import { Injectable } from "@angular/core";
import { Couchbase } from "nativescript-couchbase";
import * as connection from "tns-core-modules/connectivity";
import { isAndroid } from "platform";

@Injectable()
export class CouchbaseService {

    private database: any;

    constructor() {
        console.log("enter constructor")
        this.init();
    }

    private init(){
        if(!this.database) {
            console.log("enter init")
            this.database = new Couchbase("data");
        }
    }

    public getDatabase() {
        return this.database;
    }
    ...

}

@NgModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CouchbaseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from "@angular/core";
import * as Platform from "platform";
import { CouchbaseService } from './services/couchbase.service';

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent { 
    constructor(private service: CouchbaseService) {
        console.log(this.service.getDatabase());
    }
}

现在，在组件中使用构造函数依赖项注入，如下所示：

import { Injectable } from "@angular/core";
import { Couchbase } from "nativescript-couchbase";
import * as connection from "tns-core-modules/connectivity";
import { isAndroid } from "platform";

@Injectable()
export class CouchbaseService {

    private database: any;

    constructor() {
        console.log("enter constructor")
        this.init();
    }

    private init(){
        if(!this.database) {
            console.log("enter init")
            this.database = new Couchbase("data");
        }
    }

    public getDatabase() {
        return this.database;
    }
    ...

}

@NgModule({
  declarations: [
    AppComponent,
    YourComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [CouchbaseService],
  bootstrap: [AppComponent]
})
export class AppModule { }

import { Component } from "@angular/core";
import * as Platform from "platform";
import { CouchbaseService } from './services/couchbase.service';

@Component({
    selector: "ns-app",
    templateUrl: "app.component.html",
})

export class AppComponent { 
    constructor(private service: CouchbaseService) {
        console.log(this.service.getDatabase());
    }
}

@Injectable（{providedIn:'root'}）
将在应用程序的根目录创建一次服务。注入的每个地方都会收到相同的实例。@JasonWhite
@Injectable（{providedIn:'root'}）
是在Angular 6中引入的。用户正在使用Angular 5。在检查singleton服务之前，我有一个这样的代码。我能看到的唯一区别是
BrowserModule
的用法，这就是我需要的吗？因为在添加BrowserModule之后，我仍然丢失了
数据库的值
，我得到了以下信息：
**ERROR**ReferenceError:Event未定义JS:bootstrap:ERROR引导角度JS:bootstrap:Event未定义JS:JS:ReferenceError:Event未定义
。我正在用模块编辑我的问题，以备您需要。这里的问题是：如果这确实是一个单例类，为什么终端总是打印
enterinit
？这意味着它没有保存值（如果我打印它，结果是
未定义
），我不确定您的设置中会出现什么问题。但它在我的环境中运行良好。事实上，在stackblitaz项目中也是如此。请参阅演示-@amlibtest不要尝试复制粘贴整个代码，我建议您理解并将其应用到您的项目中。使用NativeScript时，由于应用程序不会在浏览器中运行，因此使用
NativeScript模块
而不是
BrowserModule
。本应在NativeScript Angular的入门指南中介绍这一点。答案是将您的服务标记为应用程序模块（根）上的提供商，因此只会创建一个实例，并且它应该在整个应用程序中都可用。我认为在将Angular用于项目之前，您必须花大量时间学习它的基本知识。您完全不了解构造函数中的依赖项注入和创建自己的实例，这就是这里的问题所在。还要记住，不能使用角代码或将服务实例传递给工作线程，这是一个限制。