Как заново выполнить подписку Observable в Angular

Question

У меня есть служба, которая выбирает список пользователей с сервера API и кэширует его:

@Injectable({
  providedIn: 'root'
})
export class UsersService {

  constructor(private apiService: ApiService) {}

  users: UsersListInterface[] = null;

  getAll():Observable<UsersListInterface[]> {
    if (this.users !== null) {
      return of(this.users);
    }
    return this.apiService.get<UsersListApiInterface[]>(16, '').pipe(
      map((receivedData: UsersListApiInterface[]) => {
        this.users = receivedData.map(
          function(rawUser: UsersListApiInterface):UsersListInterface {
            return Object.assign({}, rawUser, {
              id: Number(rawUser.id)
            });
          }
        )
        return this.users;
      })
    );
  }

  add(newUser: UserVehicleDongleModel): Observable<string> {
    return this.apiService.post<ResultInterface>(6, 'create', newUser).pipe(
      map((receivedData: ResultInterface) => {
        this.users = null;
        return receivedData.result;
      })
    );
  }
}

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

У меня есть компонент, который использует эту службу и управляет формой для добавления / редактирования пользователей.В событии onInit он подписывается на получение всех пользователей.Он сохраняет подписку, чтобы иметь возможность отписаться от нее в событии ngOnDestroy:

ngOnInit(): void {
    this.getUsersSubscription = this.usersService.getAll().subscribe(
        ((users) => {
            this.users = users;
        }),
        ((error: HttpErrorResponse) => {
            console.error(error);
            this.users = [];
        })
    )
}

ngOnDestroy(): void {
    if (this.getUsersSubscription) {
        this.getUsersSubscription.unsubscribe();
    }
}

onSubmit(add: NgForm) {
    if (add.valid) {
        if (this.selectedUser === null) {
            this.addUserSubscription = this.usersService.add(newUser).subscribe(
                () => {
                    // Refresh list of users?
                },
                (error: HttpErrorResponse) => {
                    console.error(error);
                }
            );
        } else {
            this.updateUserSubscription = this.usersService.update(newUser).subscribe(
                () => {
                    //
                },
                (error: HttpErrorResponse) => {
                    console.error(error);
                }
            );
        }
    }
}

Существует ли способ повторно использовать эту подписку, чтобы получить список пользователей после добавления нового пользователя

Answer 1

Во-первых, отпадает необходимость отписываться вручную См. Этот пост

Во-вторых, создайте метод и просто вызовите его в подписке на добавление пользователя.

ngOnInit(): void {
    this.refreshUsers();
}

private refreshUsers(): void {
  this.usersService.getAll().subscribe(
        ((users) => {
            this.users = users;
        }),
        ((error: HttpErrorResponse) => {
            console.error(error);
            this.users = [];
        })
    )
}




onSubmit(add: NgForm) {
    if (add.valid) {
        if (this.selectedUser === null) {
            this.addUserSubscription = this.usersService.add(newUser).subscribe(
                () => {
                    // Refresh list of users?
                    this.refreshUsers();
                },
                (error: HttpErrorResponse) => {
                    console.error(error);
                }
            );
        } else {
            this.updateUserSubscription = this.usersService.update(newUser).subscribe(
                () => {
                    //
                },
                (error: HttpErrorResponse) => {
                    console.error(error);
                }
            );
        }
    }
}