Как создать тему поведения для объекта и подписаться на него на другом компоненте?

Question

Я создал тему поведения в классе обслуживания.

    public personObject: BehaviorSubject<any> = new BehaviorSubject<any>({
                                               personId: 1,
                                               name: 'john doe'
                                               });

На компоненте, который импортирует этот сервис, я подписал эту тему поведения следующим образом:

`        this._subscription.add(
            this._bankService.personObject.subscribe(data => {
                this.personObject = data;
                console.log(data);
            })
        );`

Но я не могу получить точный набор данных в теме поведения. Пожалуйста помоги.

Изменить Я забыл упомянуть, что я использовал ViewContainerRef для создания моего родного компонента. Поэтому я добавил ответ с несколькими комментариями по моей проблеме.

Answer 1

Я забыл упомянуть, что я использовал, я использовал ViewContainerRef для создания родственного компонента, и оказывается, что субъект поведения не работает так же, как компонент, созданный с использованием ViewContainerRef.

Другие объекты мудрого поведения любого объекта работают точно так же, как с числом или строкой. Я использовал @Input для отправки данных компоненту на данный момент.

Answer 2

Оказание услуг

@Injectable()
export class DataService {

  private _dataListSource: BehaviorSubject<IData[]> = new BehaviorSubject([]);
  dataList: Observable<IData[]> = this._dataListSource.asObservable().distinctUntilChanged();

  ...

  getDataList(): Observable<any> {
      return this.httpService.get('/data').map(res => {
          this._dataListSource.next(res);
      });
  }

и тогда вы можете использовать его в своем компоненте

export class DataComponent implements OnInit {

    public dataList$: Observable<IData[]>;

    constructor(public dataService: DataService) {}

    ngOnInit() {
        this.dataList$ = this.dataService.dataList;
        this.dataService.getDataList().subscribe();
    }
}

и ваш HTML

    <div *ngIf="dataList$ | async; let dataList; ">
        <div *ngFor="let data of dataList">
            {{ data | json}}
        </div>
    </div>

Answer 3

В компоненте, на который вы подписываетесь personObject:

      import { StoreService } from '../../services/store.service'; // service file with personObject variable

constructor(private _storeService: StoreService) {}

this._storeService.personObject.subscribe( value => {
  console.log(value);
} );

в компоненте, где вы меняете свойства объекта:

      import { StoreService } from '../../services/store.service';

constructor(private _storeService: StoreService) {}

ngOnInit(): void {
    let person = { personId: 0, name: '' };
    this._storeService.personObject.subscribe( value => {
      person.personId = value.personId; // set value personId from service
    } );
    this._storeService.order.next({...person, name: 'somebody'  } ); // set new value for name property
  }