创建无状态服务的正确方法 Angular RxJs Observable

Question

我需要使用 RxJs 和 Observables 维护无状态服务。所以我这样做了：

注意： 在这里，我需要以响应方式生成工作订单编号，并将其存储在 LocalStorage 上，以避免在浏览器刷新时丢失 ID/App Killed 用例。

我怀疑我创建无状态服务的方式是否正确？如果不是，最好的方法是什么？

注意： 一切正常。但是我需要知道我对这个架构的理解是否正确？

工单-data.Service.ts

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

    private workOrderNumber: number = 1;
    private workOrderNumberSubject$: BehaviorSubject<number> = new BehaviorSubject<number>(this.workOrderNumber);
    workOrderNumberChanged$: Observable<number> = this.workOrderNumberSubject$.asObservable();

    constructor(

        private storage: Storage,
    ) { }



    setDefaultWorkOrderNumber(workOrderNumber: number): void {
        this.workOrderNumber = workOrderNumber;
    }

    setWorkOrderNumber(): void {
        this.workOrderNumber += 1;
        this.workOrderNumberSubject$.next(this.workOrderNumber);

        this.storage.set(LocalStorageConstant.WORK_ORDER_NUMBER, this.workOrderNumber);
    }
}

app.component.ts

 async initializeApp(): Promise<void> {

     this.workOrdersDataService.setDefaultWorkOrderNumber(Number(await this.storage.get(LocalStorageConstant.WORK_ORDER_NUMBER)));
}

工作-order.component.ts

    createWorkOrder(): void {   

          this.workOrdersDataService.setWorkOrderNumber(); // to generate new work order no.

 this.workOrdersDataService.workOrderNumberChanged$.subscribe((res: number) => {

        const workOrderNumber: string = environment.companyEnvironment.workOrderPrefix + res; // work order no. creation

      });

      }

Answer 1

架构良好且合法。

如果您想扩展反应式方法，请将 initializeApp 转换为 Observable。

这里不需要使用 Promise。

毕竟，Observables 的强大之处在于它们对多个 API 的全局 API 抽象。（Promise / Fetch / 常规数据结构，如数组等...）

我会做的是：

 initializeApp(): Observable<any> {
    return from(Number(this.storage.get(LocalStorageConstant.WORK_ORDER_NUMBER))).pipe(take(1)); // take(1) for auto completion.
 }

然后在您的 app.component.ts 中的 ngOnInit 中订阅它，您可以并且应该调用 this.workOrdersDataService.setDefaultWorkOrderNumber

请注意这里没有 void 签名，而是 any 因为它缺少订阅函数参数。

此外，它可能不直接涉及这个问题，但我会考虑在您的数据服务中使用 publishBehavior 和 refCount（自动订阅计数的 refCount）以获得更多 "modern" 写在主题的直接声明上。（这还允许您使用其 .connect 方法来决定何时激活主题，而不是在您的数据服务中提前分配它）。

创建无状态服务的正确方法 Angular RxJs Observable

correct way of creating Stateless service Angular RxJs Observable

observer-pattern

rxjs

typescript

ionic-framework

angular