Обмен данными через BehaviorSubject и привязка к результатам, не уверен, что это нормально? - PullRequest
0 голосов
/ 07 мая 2019

Я использую сервис для хранения некоторых данных, которые мне нужны для обмена между различными компонентами. Чтобы сделать мой HTML чище, я разделил форму на несколько компонентов, содержащих несколько полей.

Вот пример.

Услуга:

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

@Injectable()
export class DataService {

  private mAccount$ = new BehaviorSubject({accountdatahere});

  // subscribe to this
  public get Account$(): Observable<IAccount> {
     return this.mAccount$.asObservable();
  }

  constructor() { }

  SetAccount(acc) {
    this.mAccount$.next(acc); // this gets called my my parent component (not depicted)
  }

}

(Примечание: код является примером)

Компонент 1:

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-first',
  template: `
    {{account}}
  `,
})
export class FirstComponent implements OnInit {

  account: IAccount;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.Account$.subscribe(acc => {
        this.account = acc;
        this.account.Name = 'Changed from Component 1';
     })

  }

}

Компонент 2:

import { Component, OnInit } from '@angular/core';
import { DataService } from "../data.service";

@Component({
  selector: 'app-second',
  template: `
    {{account.Name}} <<==== NOTE: ** (Over here is shows 'Changed from Component 1')
  `,
})
export class SecondComponent implements OnInit {

  account: IAccount;

  constructor(private data: DataService) { }

  ngOnInit() {
    this.data.Account$.subscribe(acc => this.account = acc; );
  }

}

Проблема, с которой я столкнулся, заключается в том, что компонент 2 отражает изменения, внесенные в компонент 1, без необходимости вызывать «Account $ .next ()».

Это предполагаемое использование BehaviorSubject или я делаю что-то не так? Если я хочу сделать это с помощью '.next ()', тогда мне нужно будет обнаруживать изменения во всех полях ввода, а затем вызвать '.next ()', или мой дизайн неправильный, и мне лучше оставить все свои HTML в один компонент?

Любой совет?

...