Я использую сервис для хранения некоторых данных, которые мне нужны для обмена между различными компонентами.
Чтобы сделать мой 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 в один компонент?
Любой совет?