web-dev-qa-db-fra.com

Comment créer un sujet de comportement pour objet et y souscrire sur un autre composant?

J'ai créé un sujet de comportement dans une classe de service.

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

Sur un composant qui importe ce service, j'ai souscrit ce sujet de comportement comme suit: 

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

Mais je ne parviens pas à obtenir un ensemble de données exact dans le comportement. S'il vous plaît aider.

Edit J'ai oublié de mentionner que j’ai utilisé ViewContainerRef pour créer mon comnponent frère. J'ai donc ajouté une réponse avec quelques commentaires sur mon problème.

angulartypescriptobjectrxjsbehaviorsubject
4
Prabesh

J'ai oublié de mentionner que j'utilisais J'utilisais ViewContainerRef pour créer un composant frère et il s'avère que le comportement du sujet ne fonctionne pas de la même manière avec le composant créé à l'aide de ViewContainerRef.

D'autres sujets de comportement sage de n'importe quel objet fonctionnent exactement comme avec un nombre ou une chaîne. J'ai utilisé @Input pour envoyer des données au composant pour le moment.

0
Prabesh

un service

@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);
      });
  }

et alors vous pouvez l'utiliser dans votre composant

export class DataComponent implements OnInit {

    public dataList$: Observable<IData[]>;

    constructor(public dataService: DataService) {}

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

et votre html

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