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

Question

У меня есть служба angular, в которой есть метод, который возвращает подробности, когда я подписываюсь на него, но для получения новых значений мне приходится подписываться на него каждый раз, и я думаю, что это не идеально.

Метод обслуживания выглядит как

details.service.ts

getDetails(id: string): Observable<any> {
    return this._http
      .post<any>('baseUrl/detail', { id });
}

Компонент выглядит так,

list.component.ts

getDetails() {
    this._detailsService.getDetails(this.id).subscribe(
      (detail) => {
        // logic here...
      },
      err => console.log(err)
    );
  }

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

Answer 1

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

Поэтому я бы посоветовал вам канал take(1) для this._detailsService.getDetails(this.id).В подписке вы можете привязать результат обратно к вашей компонентной модели.

take(1) обеспечит отмену подписки сразу после успешного завершения службы, поэтому вам не придется беспокоиться о нескольких конечных подписках.

Пример:

public details: any;
getDetails() {
    this._detailsService.getDetails(this.id).pipe(take(1)).subscribe(
      (detail) => {
        // logic here...
        this.details = detail;
      },
      err => console.log(err)
    );
  }

Answer 2

вызов getDetails функция от ngOnInit().он будет выполняться только один раз.

проверка угловых крюков жизненного цикла .

ngOnInit(){
    this.getDetails(); // one time initialize
}

getDetails() {
    this._detailsService.getDetails(this.id).subscribe(
      (detail) => {
        // logic here...
      },
      err => console.log(err)
    );
  }

Answer 3

Вы можете поместить свою подписку в конструктор или ngOnit, чтобы избежать этого.

constructor() { 
this._detailsService.getDetails(this.id).subscribe(
          (detail) => {
            // logic here...
          },
          err => console.log(err)
        );
}
or 
ngOnInit() {
this._detailsService.getDetails(this.id).subscribe(
              (detail) => {
                // logic here...
              },
              err => console.log(err)
            );
  }

Answer 4

ngOnInit() - это место для выполнения одноразовых функций инициализации.

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