布莱恩F爱
向来自波特兰的谷歌开发者专yobet英雄联盟家学习Angular、Web技术和Node.js。
广告 ·ultimatecourses.com
使用Ultimate Courses以正确的方式学习Angular"></a>
          </div>
          <article class=

NgRx +加载指示器

应用加载指示器使用NgRX和Angular。

为什么?

大多数应用程序执行异步加载数据,在加载数据时,应用程序可能需要显示加载指示符。使用NgRX,我们可以根据分派给商店的动作轻松切换加载指示器或旋转器的显示。

样例应用程序

我将使用一个示例应用程序的两个分支,该应用程序是英雄演示应用程序之旅:

  1. Ngrx-refactor-2是第一个
  2. Ngrx-refactor-3是第二个版本

您可以下载或克隆ngrx-refactor-2存储库的分支位于:

首先,让我们看一个例子状态接口,其中包括加载财产。您可以在示例应用程序中看到第一个示例ngrx-refactor-2分支机构:

git结帐ngrx-refactor-2美元cd服务器& &

这是删减后的内容src / app /州/国家/还原剂/ powers.ts

出口接口状态扩展EntityState<权力>加载布尔出口常量适配器EntityAdapter<权力>createEntityAdapter常量initialState状态适配器getInitialState加载出口函数减速机状态状态initialState行动PowersAction开关行动类型情况下LOAD_POWERS返回...状态加载真正的情况下LOAD_POWERS_SUCCESS状态...状态加载返回适配器addAll行动有效载荷状态默认的返回状态出口常量isLoading状态状态=>状态加载

有几点需要注意:

  • 首先,我们定义a加载财产在我们状态接口。
  • 其次,我们将值设置为initialState
  • 在我们的减速机()函数,我们切换值。

控件中的loading属性创建一个选择器src / app /州/国家/还原剂/ index.ts文件:

出口常量isPowerLoadingcreateSelectorgetPowersEntityStatefromPowersisLoading

在有状态(容器)组件中,我们可以使用选择器从存储中选择这个值。这个例子来自src / app / + /集装箱/索引/ index.component.ts权力文件:

加载可观测的<布尔>ngOnInit加载商店选择isPowerLoading

在无状态(哑)组件中,我们可以使用这个值来切换Material的微调组件的显示。这是输入的组件src / app / + /组件/权力/ powers.component.ts权力

出口PowersComponent输入加载布尔

这是模板src / app / + /组件/权力/ powers.component.html权力

<mat-list* ngIf!加载;其他的转轮><!——列出幂——>mat-list><ng-template#转轮><divfxLayoutfxLayoutAlign中心的中心><mat-spinner>mat-spinner>div>ng-template>

在上面的模板代码中,我们使用NgIf指示来切换旋转器的显示加载价值。如果loading为false,则显示幂次列表,否则,则显示< ng-template >旋转器在中间。

第二次的拍摄

虽然第一个方法是使用NgRX切换加载指示器或微调器的显示,但我们可以重构它以更好地使用NgRX,特别是应用程序中的操作触发的效果。

第二部分的解决方案可在示例应用程序中使用ngrx-refactor-3分支机构:

git结帐ngrx-refactor-3

你可以通过以下方式下载或克隆ngrx-refactor-3分支:

行动

首先,让我们创建两个动作:

  1. ShowSpinner,它将显示旋转器。
  2. HideSpinner,它将隐藏旋转器。

让我们来看看src / app /状态/共享/动作/ spinner.ts文件:

进口行动“@ngrx /商店”进口createActionType“. . /跑龙套”出口常量SPINNER_SHOWcreateActionType“SPINNER_SHOW”出口常量SPINNER_HIDEcreateActionType“SPINNER_HIDE”出口HideSpinner实现了行动只读的类型SPINNER_HIDE出口ShowSpinner实现了行动只读的类型SPINNER_SHOW出口类型SpinnerActionShowSpinner|HideSpinner

总结:

  • 我们定义了两个动作类型常量:SPINNER_SHOWSPINNER_HIDE
  • 然后定义两个操作类来实现行动接口:HideSpinnerShowSpinner
  • 最后,我们导出SpinnerAction类型的并集ShowSpinnerHideSpinner类型。

减速机

接下来,我们将定义a减速机()函数更改应用程序的状态。让我们来看看src / app /状态/ /还原剂/ spinner.ts共享

进口SPINNER_HIDESPINNER_SHOWSpinnerAction“. . /行动/转轮”出口接口状态显示布尔常量initialState状态显示出口函数减速机状态状态initialState行动SpinnerAction开关行动类型情况下SPINNER_HIDE返回...状态显示情况下SPINNER_SHOW返回...状态显示真正的默认的返回状态出口常量isShowing状态状态=>状态显示

让我们快速回顾:

  • 首先,我们定义a状态单一接口显示属性,它是布尔价值。
  • 接下来,我们设置initialState对象的值显示设置为
  • 在我们的减速机()函数将返回值为的状态的新副本显示设置为真正的

不要忘记将新特性状态添加到应用程序中状态.它位于src / app /核心/州/ app.reducer.ts文件示例应用程序:

出口常量appReducerActionReducerMap<AppState>路由器routerReducer间小吃店fromSnackbar减速机微调控制项fromSpinner减速机

我只是简单地加了微调控制项属性的引用减速机()函数,我们刚刚创建和导出。

选择器

如果你注意到,我定义了一个isShowing函数接受状态对象并返回布尔值显示的价值src / app /状态/ /还原剂/ spinner.ts共享文件。使用这个函数,我们将创建一个新的选择器src / app /共享/还原剂/ index.ts

进口createSelectorcreateFeatureSelector“@ngrx /商店”进口作为fromSpinner”。/转轮”出口常量selectSpinnerEntitycreateFeatureSelector<fromSpinner状态>“旋转”出口常量isSpinnerShowingcreateSelectorselectSpinnerEntityfromSpinnerisShowing

我们将使用isSpinnerShowing选择器来切换加载指示器或旋转器的显示。

影响

通过创建动作和reducer函数来改变应用的状态,我们就可以在效果中实现动作了。在这个例子中,我只打算更新的效果权力模块。您需要在计划切换加载指示器的每个实体中实现这些效果。

让我们来看看src / app /州/国家/ / powers.ts影响

类型showSpinnerTypes|AddPower|DeletePower|LoadPower|LoadPowers|UpdatePower常量showSpinnerActionsADD_POWERDELETE_POWERLOAD_POWERLOAD_POWERSUPDATE_POWER类型hideSpinnerTypes|AddPowerSuccess|DeletePowerSuccess|LoadPowersSuccess|LoadPowersSuccess|UpdatePowerSuccess常量hideSpinnerActionsADD_POWER_SUCCESSDELETE_POWER_SUCCESSLOAD_POWER_SUCCESSLOAD_POWERS_SUCCESSUPDATE_POWER_SUCCESS可注射的出口PowersEffects效果showSpinner可观测的<行动>行动减低<showSpinnerTypes>...showSpinnerActions地图=>ShowSpinner效果hideSpinner可观测的<行动>行动减低<hideSpinnerTypes>...hideSpinnerActions地图=>HideSpinner

让我们回顾一下上面的代码:

  • 首先,我省略了import语句。如果需要引用它们,可以查看完整的示例代码。
  • 然后,我们创建一组类型和动作,用于显示或隐藏微调器。
  • showSpinnerTypes是所有动作的联合,用于显示旋转器。
  • showSpinnerActions是用于显示微调器的操作类型数组。
  • hideSpinnerTypes是我们何时隐藏转轮的所有行动的联合。为了简洁起见,我只在动作成功时隐藏转轮。这显然不是真实世界。您还需要包含任何失败/错误操作。
  • hideSpinnerActions是用于隐藏微调器的操作类型数组。
  • 然后定义两个属性:showSpinnerhideSpinnerPowersEffects类。
  • showSpinner属性将被触发showSpinnerActions发货到商店,我们将发货ShowSpinner作为结果的行动。
  • hideSpinner属性将被触发hideSpinnerActions发货到商店,我们将发货HideSpinner作为结果的行动。

模板

我要加< mat-spinner >组件的LayoutComponent我用来包装我的容器模板。根据应用程序的体系结构,实际加载指示器或微调器的实现位置可能会有所不同。您也可以使用来自另一个库的不同组件或自定义加载指示组件。目标是相同的,切换加载指示器的显示基于isSpinnerShowing选择器。

让我们看一个例子src / app /共享/组件/布局/ layout.component.ts文件:

出口LayoutComponent实现了OnInit加载可观测的<布尔>构造函数私人商店商店<AppState>ngOnInit加载商店选择isSpinnerShowing

我们只需使用select ()功能,提供isSpinnerShowing选择器,存储以检索布尔值。我有一个加载属性,即可观测的布尔值,我们将在模板中使用它来切换< mat-spinner >

下面是模板的代码片段,用于切换spinner的显示src / app /共享/组件/布局/ layout.component.html

<ng-content* ngIf!(|异步加载);其他的转轮>ng-content><ng-template#转轮><divfxLayoutfxLayoutAlign中心的中心><mat-spinner>mat-spinner>div>ng-template>

在模板中,我们简单地使用NgIf控件的显示切换< ng-content >为应用程序。当我们不加载任何东西时,我们将在这里显示转译的内容。当我们加载时,我们将显示< ng-template >包括< mat-spinner >加载指标。

结论

使用NgRX,我们可以有效地实现一个应用范围内的方法来切换加载指示器的显示。虽然我们可以在每个组件级别上实现这一点,但我们可以利用@ngrx/effects模块来调度ShowSpinnerHideSpinner基于添加、删除、加载和更新实体的操作。

布莱恩F爱

嗨,我是布莱恩。我对TypeScript、Angular和Node.js感兴趣。我和我最好的朋友邦妮结婚了,我住在波特兰,我经常滑雪。