nativescript - Singleton 类不适用于组件导航

Question

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

我读过有关使用静态变量创建类提供程序的内容，因此它可以保持不变，但我发现每次导航到另一个组件时，静态变量内容都会丢失。

这是我到目前为止的代码 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 更改为非静态)

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() {
        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 结合使用。

Answer 1

这不是应该如何使用单例服务。让我们这样做:

像这样更改您的服务:

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;
    }
    ...

}

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

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

现在在您的组件中使用构造函数依赖注入(inject)，如下所示:

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());
    }
}