Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com
以正确的方式学习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 $光盘服务器&&

这是修剪过的内容SRC / APP / State / Powers / Reducers / Powers.Ts

出口界面状态延伸EntityState<力量>{装载布尔;}出口const适配器EntityAdapter<力量>=createEntityAdapter;constInitimstate.状态=适配器getInitialState{装载错误的};出口函数减速器状态状态=Initimstate.行动Powersaction.{开关行动类型{案件LOAD_POWERS返回{......状态装载真正的};案件load_powers_success.状态={......状态装载错误的};返回适配器都加进去行动有效载荷状态;默认返回状态;}}出口constinsloading.=状态状态= >状态装载;

以下几点需要注意:

  • 首先,我们定义了一个装载在我们的财产状态界面。
  • 其次,我们将值设置为错误的Initimstate.
  • 在我们的减速器()功能我们切换值。

然后,我们为加载属性创建一个选择器SRC / APP / State / Powers / Reducers / Index.ts文件:

出口constispowerload=createEleLector.getPowersentityState.fromPowersinsloading.;

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

装载可观察到的<布尔>;ngoninit.{装载=店铺选择ispowerload;}

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

出口班级PowersComponent.{@输入装载布尔;}

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

<垫子列表* ngif.=!加载;其他的转轮><! - 列出权力 - >垫子列表><ng-templation.#spinner.><divFXLayout.=fxlayoutalign.=中心中心><mat-spinner>mat-spinner>div>ng-templation.>

在上面的模板代码中,我们使用ngif.控件来切换微调器的显示装载价值。如果加载为false那么我们显示出列表,否则,我们显示转轮在中间。

第二次

虽然第一次采取是使用NGRX切换加载指示器或微调器的好方法,但我们可以重新推荐它以更好地使用NGRX,具体地,通过我们应用程序中的操作触发的效果。

第二个场景的解决方案可以在样例应用程序中找到ngrx-refactor-3分支:

$git结帐Ngrx-Refactor-3

你可以下载或克隆ngrx-refactor-3分支:

行动

要开始,让我们创建两个操作:

  1. showspinner.,这将显示旋转器。
  2. hidespner.,这将隐藏旋转器。

让我们来看看SRC / APP /州/共享/操作/ Spinner.ts文件:

进口{行动}“@ ngrx /商店”;进口{createActionType}“. . /跑龙套”;出口constSpinner_Show.=createActionType“spinner_show”;出口constspinner_hide.=createActionType“SPINNER_HIDE”;出口班级hidespner.实施行动{readonly类型=spinner_hide.;}出口班级showspinner.实施行动{readonly类型=Spinner_Show.;}出口型旋转器=showspinner.|hidespner.;

总结:

  • 我们定义了两个动作类型常量:Spinner_Show.spinner_hide.
  • 然后定义两个操作类,它们实现行动界面:hidespner.showspinner.
  • 最后,我们出口旋转器类型的并集showspinner.hidespner.类型。

减速器

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

进口{spinner_hide.Spinner_Show.旋转器}“../actions/spinner”;出口界面状态{表演布尔;}constInitimstate.状态={表演错误的};出口函数减速器状态状态=Initimstate.行动旋转器{开关行动类型{案件spinner_hide.返回{......状态表演错误的};案件Spinner_Show.返回{......状态表演真正的};默认返回状态;}}出口constisShowing=状态状态= >状态表演;

让我们快点审查:

  • 首先,我们定义一个状态使用单个表演属性是一个布尔价值。
  • 接下来,我们设置了Initimstate.物体值表演调成错误的
  • 在我们的减速器()函数我们将返回具有值的新副本表演调成真正的错误的

不要忘记将新的特性状态添加到应用程序中状态。这位于src / app / core / state / app.reducer.ts文件在示例应用程序中:

出口const尊敬的人ActionReducerMap.<AppState>={路由器RouterEducer.小吃店fromSnackbar减速器旋转器Fromspinner.减速器};

我只是添加了旋转器属性的引用减速器()函数我们刚刚创建和导出。

选择器

如果你注意到,我定义了isShowing接受的功能状态对象并返回布尔值表演价值在src / app /状态/ /还原剂/ spinner.ts共享文件。使用此功能,我们将创建一个新选择器SRC / APP / SHARED / REDUCERS / INDEX.TS

进口{createEleLector.createFeatureSelector}“@ ngrx /商店”;进口*作为Fromspinner.”。/转轮”;出口const选择性策略=createFeatureSelector<Fromspinner.状态>“旋转器”;出口constisspinershowing.=createEleLector.选择性策略Fromspinner.isShowing;

我们将使用isspinershowing.选择器在我们的应用程序中切换加载指示灯或微调器的显示。

效果

通过我们的行为创建和我们的减速机函数来改变我们的应用程序,我们已准备好实现我们的效果中的行动。在这个例子中,我只是为了更新效果权力模块。您需要在每个实体中实现效果,在您计划切换加载指示灯。

让我们来看看SRC / APP /州/权力/效果/权力

键入showspinnertypes.=|addpower.|deletepower.|LoadPower.|loadpowers.|UpdatePower;constshowSpinnerActions=[add_power.delete_power.load_power.LOAD_POWERSupdate_power.];类型hideSpinnerTypes=|addpowersuccess.|DeletePowerSuccess|loadpowersssuccess.|loadpowersssuccess.|updatePowersuccess.;constHideSpinneractions=[add_power_success.delete_power_success.LOAD_POWER_SUCCESSload_powers_success.update_power_success.];@可注射的出口班级powerseffects.{@影响showSpinner可观察到的<行动>=行动oftype.<showSpinnerTypes>......showSpinnerActions地图= >showspinner.;@影响hidespner.可观察到的<行动>=行动oftype.<hideSpinnerTypes>......HideSpinneractions地图= >hidespner.;}

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

  • 首先,我省略了导入语句。如果需要引用它们,可以查看完整示例代码。
  • 然后,我们将为我们想要显示或隐藏微调器时创建一组类型和操作。
  • showSpinnerTypes是我们展示旋转器时的所有行动的联盟。
  • showSpinnerActions当我们显示旋转器时,是一个动作类型的数组。
  • hideSpinnerTypes是所有行动的联合,当我们将隐藏的转轮。为了简洁,我只在动作成功时隐藏转轮。这显然不是真实世界。您还需要包含任何失败/错误操作。
  • HideSpinneractions当我们隐藏旋转器时,是一个动作类型的数组。
  • 然后定义两个属性:showSpinnerhidespner.powerseffects.班级。
  • showSpinner属性中的任何showSpinnerActions被派往商店,我们将发出showspinner.结果是行动。
  • hidespner.属性中的任何HideSpinneractions被派往商店,我们将发出hidespner.结果是行动。

模板

我要加上组件到layoutcomponent.我用来包装我的容器模板。在您实现实际加载指示灯或旋转器的情况下,可能会根据您的应用程序的架构而有所不同。您也可以使用另一个库或自定义加载指示器组件的不同组件。目标是相同的,基于以下的拨动LOADIG指示符的显示isspinershowing.选择器。

让我们看看这个例子src / app / shared / component / layout / layout.component.ts文件:

出口班级layoutcomponent.实施oninit.{装载可观察到的<布尔>;构造函数私人的店铺店铺<AppState>{}ngoninit.{装载=店铺选择isspinershowing.;}}

我们只是使用了select ()功能,提供isspinershowing.选择器,到存储区检索布尔值。我有一个装载属性是可观察到的A.布尔值,我们将在模板中使用它来切换

并且,这是从模板的片段切换到旋转器的显示器src / app / shared / components / layout / layout.component.html

<ng内容* ngif.=!(|异步加载);其他的转轮>ng内容><ng-templation.#spinner.><divFXLayout.=fxlayoutalign.=中心中心><mat-spinner>mat-spinner>div>ng-templation.>

在模板中我们只是使用ngif.控件的显示方式适用于申请。当我们未加载任何内容时,我们将在此显示丢失的内容。当我们加载时,我们将显示那包括这一点加载指标。

结论

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

Brian F爱

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