使用 Angular 和 PouchDB 进行 PWA答案

【问题标题】：Using Angular and PouchDB for PWA使用 Angular 和 PouchDB 进行 PWA
【发布时间】：2018-12-27 21:11:51
【问题描述】：

我已使用Angular Heroes tutorial 并正在尝试实施 pouchdb 服务来提供数据。我已经备份了原始的英雄服务，它提供了一系列具有不同属性的英雄。我现在正在尝试修改服务以在本地从 pouchdb 中提取文档。我修改了 HeroService 类，并在构造函数中设置了一些选项。

import { Injectable, EventEmitter  } from '@angular/core';
import {Hero} from './hero';
import {HEROES} from './mock-heroes';
import { Observable, of } from 'rxjs';
import {MessageService} from './message.service';
import PouchDB from 'pouchdb';

@Injectable({
  providedIn: 'root'
})

export class HeroService {
  private isInstantiated: boolean;
  private database: any;
  private listener: EventEmitter<any> = new EventEmitter();


  constructor(private messageService:MessageService) { 
    if(!this.isInstantiated) {
      this.database = new PouchDB("http://server:5984/db1");
      this.isInstantiated = true;
  }
}



  getHeroes(): Observable<Hero[]> {
  console.log(this.database.allDocs({include_docs: true}))
    return of(this.database.allDocs({include_docs: true}));
    this.messageService.add("HeroService: fetched heroes");

    };

console.log 在 hero.service.ts 文件的 console.log 行中显示“ZoneAwarePromise”，但包含我想在屏幕上显示的数据和文档数组。我是否采取了正确的方法，使用服务将 PouchDB 中的数据提供给 Angular 应用程序？

我试图在其中显示此数据的组件是“dashboard.components.ts”文件，这是新功能：

getHeroes(): void {
    console.log(this.heroes)
    console.log(this.heroService.getHeroes());
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes);
    //console.log(this)

  }

有没有更好的方法来解决这个问题？

【问题讨论】：

标签： angular pouchdb

【解决方案1】：

可以说，您错过了 Pouch 的两个最酷的好处……离线优先和后台实时更新。

要获得前者，您应该实例化两个数据库：一个是远程数据库，另一个是 local to the browser 本身。然后在两者之间设置复制。第一次运行后，完全没有网络连接，您的页面将像在线一样工作。对本地数据库的写入和读取将是即时的。重新上线后，Pouch 将透明地同步所有本地和远程数据。 This article 可能会帮助您入门，（尽管您可以忽略有关 Phoenix 的内容；您可以直接连接到 CouchDB）。

如果您还使用 live-find，屏幕上的数据将在几秒钟内更新，以向用户显示服务器端的更改，而无需您进行进一步的特殊编程。

最后，我建议您评估 Couchbase（带有复制网关）而不是 CouchDB，它似乎是一颗冉冉升起的新星，而 CouchDB 似乎正在失宠。

【讨论】：