Использование Angular и PouchDB для PWA - PullRequest
0 голосов
/ 28 декабря 2018

Я взял урок Angular Heroes и пытаюсь внедрить сервис 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 показывает «ZoneAwarePromise» в файле hero.service.ts в строке console.log, но содержит массив данных и документов, которые я хочу показать на экране.Правильный ли я подход к этому, использую сервис для передачи данных из 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)

  }

Есть ли лучший подход кэтот?

1 Ответ

0 голосов
/ 28 декабря 2018

Вы упускаете, пожалуй, два самых крутых преимущества Pouch ... off-line first и background live updates .

Чтобы получитьВ первом случае вы должны создать две базы данных: одну удаленную, а другую локальную для самого браузера .Затем вы настраиваете репликацию между ними.После первого запуска, вообще без подключения к сети, ваша страница будет работать так же, как если бы она была в сети.Пишет и читает в локальную БД будет мгновенно.Вернувшись в оперативный режим, Pouch будет прозрачно синхронизировать все локальные и удаленные данные. Эта статья может помочь вам начать с этим (хотя вы можете игнорировать материал о Phoenix; вы можете напрямую подключиться к CouchDB).

Если вы также используете live-find , данные на экране будут обновляться в течение нескольких секунд, чтобы показать пользователю изменения на стороне сервера, без каких-либо дополнительных специальных программ от вас.

Наконец, я предлагаю вамоцените Couchbase (с шлюзом репликации) вместо CouchDB, кажется, что это восходящая звезда, в то время как CouchDB, по-видимому, теряет популярность.

...