xstate官网有一个用例，使用xstate+react实现一个covidtracker，可以显示某个国家的新冠动态（region）是实时的，所以转载一个angular的版本也是一个学习和提高的过程。最终效果如下：项目并不复杂（UI比逻辑更耗时），但是可以加深对xstae中actor模式的理解和invoke的使用。考虑到如果整合文章内容，长长的滚动条会让人望而生畏，所以文章分三部分进行讲解：项目搭建：完成页面基础部分，实现状态机：完成代码transitionmachine的综合应用：状态机对具体组件的应用时间不长，图文并茂，可以随时查看。希望能给大家带来启发。初始化项目开发工具这里直接选择在线开发，使用stackblitz（微软）的脚手架工具创建一个angular项目目录。还有codesandbox，一个知名的在线开发网站，现在用的人多了，速度快，不用翻墙。目录结构无论你使用vue、react还是angular，都建议单独创建一个machine目录来存放状态机，方便维护和管理。本项目使用angular，所以要将xstate作为服务使用，除了machine目录外，还需要有一个services目录来存放解析状态机后的服务。具体可以看Angular中使用xstate的目录结构，如图：这里有几个重点：组件不直接操作机器，而是通过服务转换后引入。为什么会有两个机器文件？因为我们要使用actor特性，所以使用covidMachine来存储所有的数据，在它的context中会有一个countryRef属性，指向当前选中的国家。而这个countryRef就是孵化（spawn）生成的actor。这个演员是covidDataMachine！构建页面项目中只有一个入口页面app.component.ts，三个组件：bar.component.ts：条形图编号.component.ts：统计卡片select.component.ts：页面唯一交互组件,下拉框。显示所有国家并听取用户的选择。项目中使用的ngx-charts图表组件页面列表：//app.component.tsimport{Component}from"@angular/core";@Component({selector:"my-app",styles:[`:host{边距：0自动；显示：flex；对齐内容：中心；对齐项目：中心；flex-direction：列；}`]，模板：`
