Единая база данных для приложения. Использование RXJS Единая база данных для приложения. Использование RXJS angular rxjs behavirsubject subject

Единая база данных для приложения. Использование RXJS.

Open in new window

Отслеживаемая база данных с использованием BehaviorSubject.

npm install --save rxjs-compat

Следим за тем что бы были одинаковые версии.

"rxjs": "~6.4.0",
"rxjs-compat": "^6.4.0",

Создаем сервис где будем хранить наши данные.

import { Injectable } from '@angular/core';
import {BehaviorSubject} from "rxjs/Rx";


@Injectable()
export class DbService {

  islogin: string;

  private _emmiter = new BehaviorSubject(null);
  subscriber$ = this._emmiter.asObservable();

  setIsLogin(value: string){
    this.islogin = value;
    this._emmiter.next(value)
  }

  getIsLogin(){
    return this.islogin;
  }

  constructor() {
    this.setIsLogin(localStorage.getItem('is_auth'));
  }

}

Тут мы создаем два объекта:

  private _emmiter = new BehaviorSubject(null);
  subscriber$ = this._emmiter.asObservable();

emmiter - приватный объект для инициирования события и передачи payload в клиентский компонент.

subscriber$ - публичный объект для подписки на событие.

Клиентский компонент.

import { DbService } from '../db.service';

...

export class NavComponent implements OnInit {
  is_auth: string;
  constructor(private db: DbService) { }

  ngOnInit() {
    this.db.subscriber$.subscribe(data => {
      this.is_auth = data;
    })
  }

}

Шаблон.

  <li class="nav-item" *ngIf="is_auth==='true'">
      <a class="nav-link" (click)="logout()">Logout </a>
  </li>

Other topics