Brian F爱
从专注于角图,Web技术以yobet英雄联盟及波特兰的Node.js的Google开发人员专家中学习。
广告 ·ultimatecourses.com.
用终极课程学习角度正确的方式“></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.从波韦斯insloading.;

在我们的状态(容器)组件中,我们可以使用选择器从商店中选择此值。这个例子来自src / app / + powers / containers / index / index.component.ts文件:

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

在“无状态(DUMB)组件中,我们可以使用此值来切换材料的旋转器组件的显示。这是输入组件的输入src / app / + powers / components / powers / powers.component.ts

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

这是模板src / app / + powers / components / powers / 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.}“../utils”;出口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 /州/共享/ Reducers / 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 /州/共享/ Reducers / Spinner.ts文件。使用此功能,我们将创建一个新选择器SRC / APP / SHARED / REDUCERS / INDEX.TS

进口{createEleLector.CreateFeaturesElector}“@ ngrx /商店”;进口*Fromspinner.“./spinner”;出口const选择性策略=CreateFeaturesElector<Fromspinner.>“旋转器”;出口constisspinershowing.=createEleLector.选择性策略Fromspinner.IsShowing.;

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

效果

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

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

键入showspinnertypes.=|addpower.|deletepower.|LoadPower.|loadpowers.|UpdatePower.;constshowspinneractions.=[add_power.delete_power.load_power.load_powers.update_power.];键入hidespnertypes.=|addpowersuccess.|deletepowersucess.|loadpowersssuccess.|loadpowersssuccess.|updatePowersuccess.;constHideSpinneractions=[add_power_success.delete_power_success.load_power_success.load_powers_success.update_power_success.];@可注射的出口powerseffects.{@影响showspinner.可观察到的<行动>=这个行动oftype.<showspinnertypes.>......showspinneractions.地图=>showspinner.;@影响hidespner.可观察到的<行动>=这个行动oftype.<hidespnertypes.>......HideSpinneractions地图=>hidespner.;}

让我们回顾上面的代码:

  • 首先,我省略了导入语句。如果需要引用它们,可以查看完整示例代码。
  • 然后,我们将为我们想要显示或隐藏微调器时创建一组类型和操作。
  • showspinnertypes.是我们展示旋转器时的所有行动的联盟。
  • showspinneractions.当我们显示旋转器时,是一个动作类型的数组。
  • hidespnertypes.是我们将隐藏旋转器的所有行动的联盟。为了简洁起见,当行动成功时,我只是隐藏着旋转器。这显然不是现实世界。您需要包含任何故障/错误操作。
  • HideSpinneractions当我们隐藏旋转器时,是一个动作类型的数组。
  • 然后我们定义两个属性:showspinner.hidespner.在里面powerseffects.类。
  • showspinner.任何时候都会触发财产showspinneractions.被派往商店,我们将发出showspinner.结果是行动。
  • hidespner.任何时候都会触发财产HideSpinneractions被派往商店,我们将发出hidespner.结果是行动。

模板

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

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

出口layoutcomponent.实施oninit.{装载可观察到的<布尔基>;构造函数私人的商店商店<Appstate.>{}ngoninit.{这个装载=这个商店选择isspinershowing.;}}

我们只是使用了选择()功能,提供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 /效果模块来调度showspinner.hidespner.基于添加,删除,加载和更新实体的操作的操作。

Brian F爱

嗨,我是布莱恩。我对类型名称,Angular和node.js感兴趣我嫁给了我最好的朋友邦妮,我住在波特兰和我滑雪(很多)。