nativescript - 单例类不适用于组件导航

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 { }

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

我将 NativeScript 4 与 Angular 5 和 TypeScript 2.7.2 一起使用。

标签： nativescriptnativescript-angular

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 { }

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

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