创建无状态服务Angular RxJs Observable的正确方法[关闭]答案

【问题标题】：correct way of creating Stateless service Angular RxJs Observable [closed]创建无状态服务Angular RxJs Observable的正确方法[关闭]
【发布时间】：2020-06-23 21:37:42
【问题描述】：

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

注意：这里我需要以 Reactive 方式生成一个工单编号，并将其存储在 LocalStorage 中，以避免 Id 在浏览器刷新/ App Killed 用例时丢失。

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

注意：一切正常。但我需要知道我在这个架构上是否正确？

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

work-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

      });

      }

【问题讨论】：

你测试了吗？它工作吗？
@jonrsharpe 一切正常。但我需要知道我在这个架构上是否正确。
如果this.storage.set(....) 是同步操作，这看起来是让 ylur 代码反应的好方法。您可能只想将您在createWorkOrder() 中创建的订阅发送至unsubscribe。关于 TypeScript 风格的最后一点：您可能不需要定义您初始化的变量的类型。 workOrderNumber = 1 等价于 workOrderNumber: number = 1。一旦你用1 初始化它，TS 就知道workOrderNumber 是一个数字。

标签： angular typescript ionic-framework rxjs observer-pattern

【解决方案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（自动订阅计数的参考计数），以便在直接声明的基础上进行更“现代”的写作科目。（这也允许您使用它的 .connect 方法来决定何时激活主题，而不是在您的数据服务中预先分配它）。

【讨论】：