ngx-rxdb

angular rxdb

基于rxdb的angular版封装，angular election 中如果想使用数据库，可以考虑使用

• 感谢 rxdb

安装

npm install --save ngx-rxdb

引入模块

• 导入模块
• 并配置应用启动钩子进行数据库连接

@NgModule({ 
  imports: [
    // 导入模块
    NgxRxdbModule.forRoot({
      dsn: {
        name: 'demo',                          // <- name
        adapter: 'idb',                        // <- storage-adapter
        password: '123456789',                 // <- password (optional)
        multiInstance: true,                   // <- multiInstance (optional, default: true)
        queryChangeDetection: false            // <- queryChangeDetection (optional, default: false)
      },
      schemas: [...Schemas]
    }),
  ],
  providers: [
    // 应用启动钩子
      {
          provide: APP_INITIALIZER,
          useFactory: NgxRxdbInitFactory,
          deps: [NgxRxdbInitService],
          multi: true
      }
  ], 
})
export class AppModule {
}

定义schema

import {RxJsonSchema} from 'rxdb';

export const DemoSchema: RxJsonSchema = {
  title: 'demo',
  version: 0,
  type: 'object',
  properties: {
    name: {
      type: 'string',
      primary: true,
      default: ''
    }
  }
};

import {DemoSchema} from './demo.schema';
import {MpAccountSchema} from './mp-account.schema';

// 以数组的形式导出shcemas
export const Schemas = [
  DemoSchema,
  MpAccountSchema
];

该拓展包已经自带了启动服务连接数据流，不过如果你想自定义连接数据库服务的话，可以参考如下代码

• 定义启动服务
• 进行数据库连接

import {Injectable} from '@angular/core';
import {NgxRxdbService} from '@projects/ngx-rxdb/src/lib/ngx-rxdb.service';

@Injectable({
  providedIn: 'root'
})
export class AppInitService {

  constructor(
    private dbSrv: NgxRxdbService
  ) {
  }

  load(): Promise<any> {
    return new Promise<any>(async (resolve, reject) => {
      await this.bootstrap(resolve, reject);
    });
  }

  private async bootstrap(resolve, reject) {
    // 等待数据库连接成功
    try {
      await this.dbSrv.connection();
      // todo 做你想做...
      resolve(null);
    } catch (e) {
      console.error('数据库连接失败');
      reject(e);
    }
  }
}

调用数据库API演示，更多API参考 rxdb文档

  export class DashboardComponent implements OnInit {
  
    constructor(private db: NgxRxdbService) {
    }
  
    ngOnInit() {
      // dump Demo
      this.db.getCollection('demo').dump(true).then(res => {
        console.log('【查看数据】', res);
      });
      // insert demo
      this.db.getCollection('demo')
        .insert({
          name: 'alvin'
        });
      // find demo
      this.db.getCollection('demo').find().$
        .subscribe(res => {
          console.log('【查看查询的数据】', res);
        });
    }
  
  }