xstate 官网上有个用例，使用 xstate+react 实现了一个 covid tracker，能够实时展示某个国家(地区)的新冠动态，于是复刻一个 angular 的版本，也算是一个学习和提高的过程，最终实现的效果如下图：

基于前两篇文章的铺垫，这一篇文章就很轻松了。不同框架下使用xstate官方为 vue 和 react 都提供了对应版本的 xstate ，具体细节可以参看：vue使用xstatereact使用xstateangular 没有官方版本，具体使用可以参考 在Angular中使用xstate。使用原理不管使用哪个框架，思路都大同小异：在状态机启动之后，监听 state 的改变...

上一篇完成了页面的搭建，这一篇将完成状态机的代码编写。项目中用到了两个状态机：covidMachine ：父状态机，存储所有国家信息(countryList)和选中国家的新冠数据(countryData)covidDataMachine ：子状态机，存储指定国家的新冠数据(countryData)父状态机只有一个，子状态机可以多个（取决于用户选了多少个国家） 。状...

xstate在Angular中可以扮演服务的角色，因此我们采取依赖注入(DI)的方式来使用它。流程是：创建状态机 -> 创建服务 -> 使用服务，让我们依次来实现。创建状态机新建一个状态机文件yourMachine.ts写入状态机 {代码...} 创建服务通过命令行工具创建模板文件：ng s demo服务中引入状态机器并且解析： {代码...} state...