Тема поведения Angular и http-клиент

В своем приложении я использую тему поведения. У меня есть служба, которая делает http-вызов и помещает результат в тему моего поведения

Моя служба:

  data$ = new BehaviorSubject({
      users: []
  });

  getUsers(){
      this.http()
      .subscribe((users: any) => {
          this.data$.next({...this.data$.value, users: users});
      });
  }

Я вызываю эту услугу на своей странице, но не метод Oninit. Я вызываю этот вызов во время события emi дочернего компонента на моей странице

Моя страница :

export class UserListComponent implements OnInit {
  users$ = new BehaviorSubject(null);
  
  constructor(private userService: UserService) { }

  ngOnInit(): void {}
  
  getUsers(event) {
    this.userService.getUsers();
    this.users$ = this.userService.data$;
  }

Передача результата моему дочернему компоненту:

    <app-table [config]="config" [entity]="(users$| async)?.users" 
 (onDataChange)="getUsers($event)"  class="row col-md-12">
    </app-table>

Моя проблема в том, что результат не передается моему дочернему компоненту. Тем не менее, я хорошо восстанавливаю его в своем родительском компоненте

С другой стороны, если я загружаю свои данные с самого начала в onInit, они передаются дочернему компоненту


http typescript angular components behaviorsubject
person totuti    schedule 20.02.2021    source источник
comment
Подскажите, что такое this.http()?   -  person SJNF    schedule 20.02.2021
comment
где выбрасывать onDataChange? когда?   -  person Esmaeil Mazahery    schedule 20.02.2021
comment
this.http - это мой http-вызов к моему API   -  person totuti    schedule 21.02.2021
comment
onDataChange испускается в моем дочернем компоненте (comp-table). он устанавливается, когда в этом компоненте появляется изменение (пример загрузки пользовательских настроек из хранилища), при отображении следующей страницы в таблице   -  person totuti    schedule 21.02.2021
comment
Я хотел бы остаться с моим текущим архивом и использовать тему поведения. Кроме того, между моим компонентом и моей службой есть диспетчер. Именно он вернет мне поведение субъекта, позвонив в нужную службу по действию. Я не звоню в мою службу directemnet   -  person totuti    schedule 21.02.2021

Ответы (2)


arrow_upward
0
arrow_downward

Вы можете сделать это проще.

class service ... {
   private data$ = new BehaviorSubject();

   getData() {
      return data$.asObservable(); 
   }

   setData(users[]: users) {
      this.data$.next(users);
   }

}

В Component вы можете подписаться на него или использовать его прямо в шаблоне, как вы уже сделали.

class component .. {
  users$: BehaviorSubject;
  constructor (private service: Service) {
  }

  ngOnInit(){
    this.users = this.service.gatData();
  }

 onDataChange(users) {
    this.service.setData(users);
 }
}
person Abel Valdez    schedule 20.02.2021
comment
Я хотел бы остаться с моим текущим архивом и использовать тему поведения. Кроме того, между моим компонентом и моей службой есть диспетчер. Именно он вернет мне поведение субъекта, позвонив в нужную службу по действию. Я не звоню в мою службу directemnet - person totuti; 21.02.2021
comment
Плюс данные $ состоят из нескольких вещей: списка пользователей, сведений о пользователе ... - person totuti; 21.02.2021

arrow_upward
0
arrow_downward

Я думаю, что причина, по которой ваши данные не попадают в дочерний компонент, заключается в том, что вы устанавливаете users $ subject после инициализации. Асинхронный конвейер не запускается при изменении.

На мой взгляд, более реактивный подход выглядел бы примерно так:

Сервис:

export class UserService {
    refreshData$ = new Subject();
    data$ = this.refreshData$.pipe(
        switchMap(() => this.yourHttpCall())
    );
}

Компонент:

export class UserListComponent implements OnInit {
    users$;
  
    constructor(private userService: UserService) { }

    ngOnInit(): void {
      this.users$ = this.userService.data$;
    }
  
    getUsers(event) {
      this.userService.refreshData$.next();
    }
}
person Nichita Domide    schedule 20.02.2021