时间戳

首页 > 解决方案 > 如何从服务中访问属性类型 BehaviorSubject？

angular - 如何从服务中访问属性类型 BehaviorSubject？

问题描述

我有一个 TttService 服务。它有一个细胞属性。这是一个对象数组。它仅在客户端上更改。一个组件订阅其更改，另一个组件更改它。我想让 makeMove() 更改单元格数组中所需对象的属性之一，并且在单元格上签名的组件应该获得这些更改。这怎么可能实现？

如果在方法 makeAMove() 中制作 console.log(this.cells) - 将是空的。在这种情况下，通过 initCells() 方法订阅单元的组件第一次被修改。

我的服务 

import { Injectable } from '@angular/core';
import { TttServiceInteface } from '../interfaces/ttt-service-inteface';
import { CellInteface } from '../interfaces/cell-interface';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { asObservable } from './asObservable';

@Injectable()
export class TttService {
  public cells: BehaviorSubject<CellInteface[]> = new BehaviorSubject([]);

  constructor() { }

  initCells(fieldSize: number, fieldWidth: number): Observable<CellInteface[]> {
    const cells = [];

    for (let i = 0; i < fieldSize * fieldSize; i++) {
      cells.push({
        width: fieldWidth,
        height: fieldWidth,
        id: i
      });
    }
    this.cells.next(cells);

    return this.cells;
  }

  getCells() {
    return asObservable(this.cells);
  }

  makeAMove(id: number) {
    this.getCells()
      .subscribe((c: Array<CellInteface>) => {
        c.forEach(cell => {
          if (cell.id === id && !cell.id) {
            cell.value = 1;
          }
        });
        this.cells.next(c);
    });
}

我的组件

ngOnInit() {
    const border = (window.screen.availHeight - 150);
    this.fieldSize = 5;
    this.border = border + 100;

    this.tttService
      .initCells(this.fieldSize, border / this.fieldSize)
      .subscribe(cells => {
        console.log(cells);
        this.cells = cells;
      });
  }

标签： angularrxjsbehaviorsubject

解决方案

尝试这个。

为您服务。

 private cells: BehaviorSubject<CellInteface[]> = new BehaviorSubject([]);
 private arrayOfCells: CellInterface[];

 public initCells(fieldSize: number, fieldWidth: number): void {

    for (let i = 0; i < fieldSize * fieldSize; i++) {
      this.arrayOfCells.push({
        width: fieldWidth,
        height: fieldWidth,
        id: i
      });
    }
    this.cells.next(this.arrayOfCells);
  }

 public getCells(): Observable<CellInteface[]> {
    return this.cells.asObservable();
  }

  public makeAMove(id: number) {
    this.arrayOfCells.forEach(cell => {
      if (cell.id === id && !cell.id) {
        cell.value = 1;
      }
    });
    this.cells.next(this.arrayOfCells);
  }

在订阅组件中。

constructor(private tttService: YourService ) {
   this.tttService.getCells().subscribe((cells: CellInteface[]) => {
      // you can use cells variable in here. 
    });
}

在数据设置组件中。

constructor(private tttService: YourService ) {
       const border = (window.screen.availHeight - 150);
       this.fieldSize = 5;
       this.border = border + 100;

       this.tttService.initCells(this.fieldSize, border / this.fieldSize);

  //or you can call the makeAMove method.
       this.tttService.makeAMove(id).subscribe((res) => {
          // you get the updated cell array as res
       });
  }

推荐阅读