如何在 Angular 中重新执行订阅的 Observable

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服务器。

我有一个组件使用此服务并管理 add/edit 用户的表单。在 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

首先不需要手动退订See this post

其次，创建一个方法并在您的添加用户订阅中简单地调用它。

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

如何在 Angular 中重新执行订阅的 Observable

How to re-execute subscribed Observable in Angular

angular2-observables

angular