首页 / ANGULAR / Angular X中使用ngrx的方法详解（附源码）

Angular X中使用ngrx的方法详解（附源码）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Angular X中使用ngrx的方法详解（附源码），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6408字，纯文字阅读大概需要10分钟。

内容图文

前言

ngrx 是 Angular框架的状态容器，提供可预测化的状态管理。下面话不多说，来一起看看详细的介绍：

1.首先创建一个可路由访问的模块这里命名为：DemopetModule。

包括文件：demopet.html、demopet.scss、demopet.component.ts、demopet.routes.ts、demopet.module.ts

代码如下：

demopet.html

<!--暂时放一个标签-->
<h1>Demo</h1>

demopet.scss

h1{
 color:#d70029;
}

demopet.component.ts

import { Component} from '@angular/core';

@Component({
 selector: 'demo-pet',
 styleUrls: ['./demopet.scss'],
 templateUrl: './demopet.html'
})
export class DemoPetComponent {
 //nothing now...
}

demopet.routes.ts

import { DemoPetComponent } from './demopet.component';

export const routes = [
 {
 path: '', pathMatch: 'full', children: [
 { path: '', component: DemoPetComponent }
 ]
 }
];

demopet.module.ts

import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './demopet.routes';

@NgModule({
 declarations: [
 DemoPetComponent,
 ],
 imports: [
 CommonModule,
 FormsModule,
 RouterModule.forChild(routes)
 ],
 providers: [
 ]
})
export class DemoPetModule {


}

整体代码结构如下：

Angular X中使用ngrx的方法详解（附源码） - 文章图片

运行效果如下：只是为了学习方便，能够有个运行的模块

Angular X中使用ngrx的方法详解（附源码） - 文章图片

2.安装ngrx

npm install @ngrx/core --save

npm install @ngrx/store --save

npm install @ngrx/effects --save

@ngrx/store是一个旨在提高写性能的控制状态的容器

3.使用ngrx

首先了解下单向数据流形式

Angular X中使用ngrx的方法详解（附源码） - 文章图片

代码如下：

pet-tag.actions.ts

import { Injectable } from '@angular/core';
import { Action } from '@ngrx/store';

@Injectable()
export class PettagActions{
 static LOAD_DATA='Load Data';
 loadData():Action{
 return {
  type:PettagActions.LOAD_DATA
 };
 }

 static LOAD_DATA_SUCCESS='Load Data Success';
 loadDtaSuccess(data):Action{
 return {
  type:PettagActions.LOAD_DATA_SUCCESS,
  payload:data
 };
 }


 static LOAD_INFO='Load Info';
 loadInfo():Action{
 return {
  type:PettagActions.LOAD_INFO
 };
 }

 static LOAD_INFO_SUCCESS='Load Info Success';
 loadInfoSuccess(data):Action{
 return {
  type:PettagActions.LOAD_INFO_SUCCESS,
  payload:data
 };
 }
}

pet-tag.reducer.ts

import { Action } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { PettagActions } from '../action/pet-tag.actions';

export function petTagReducer(state:any,action:Action){
 switch(action.type){

 case PettagActions.LOAD_DATA_SUCCESS:{

  return action.payload;
 }

 // case PettagActions.LOAD_INFO_SUCCESS:{

 // return action.payload;
 // }

 default:{

  return state;
 }
 }
}

export function infoReducer(state:any,action:Action){
 switch(action.type){

 case PettagActions.LOAD_INFO_SUCCESS:{

  return action.payload;
 }

 default:{

  return state;
 }
 }
}

NOTE:Action中定义了我们期望状态如何发生改变 Reducer实现了状态具体如何改变

Action与Store之间添加ngrx/Effect 实现action异步请求与store处理结果间的解耦

pet-tag.effect.ts

import { Injectable } from '@angular/core';
import { Effect,Actions } from '@ngrx/effects';
import { PettagActions } from '../action/pet-tag.actions';
import { PettagService } from '../service/pet-tag.service';

@Injectable()
export class PettagEffect {

 constructor(
 private action$:Actions,
 private pettagAction:PettagActions,
 private service:PettagService
 ){}


 @Effect() loadData=this.action$
  .ofType(PettagActions.LOAD_DATA)
  .switchMap(()=>this.service.getData())
  .map(data=>this.pettagAction.loadDtaSuccess(data))

 
 @Effect() loadInfo=this.action$
  .ofType(PettagActions.LOAD_INFO)
  .switchMap(()=>this.service.getInfo())
  .map(data=>this.pettagAction.loadInfoSuccess(data));
}

4.修改demopet.module.ts 添加 ngrx支持

import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { PettagActions } from './action/pet-tag.actions';
import { petTagReducer,infoReducer } from './reducer/pet-tag.reducer';
import { PettagEffect } from './effect/pet-tag.effect';

@NgModule({
 declarations: [
 DemoPetComponent,
 ],
 imports: [
 CommonModule,
 FormsModule,
 RouterModule.forChild(routes),
 //here new added
 StoreModule.provideStore({
 pet:petTagReducer,
 info:infoReducer
 }),
 EffectsModule.run(PettagEffect)
 ],
 providers: [
 PettagActions,
 PettagService
 ]
})
export class DemoPetModule { }

5.调用ngrx实现数据列表获取与单个详细信息获取

demopet.component.ts

import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { Observable } from "rxjs";
import { Store } from '@ngrx/store';
import { Subscription } from 'rxjs/Subscription';
import { HttpService } from '../shared/services/http/http.service';
import { PetTag } from './model/pet-tag.model';
import { PettagActions } from './action/pet-tag.actions';

@Component({
 selector: 'demo-pet',
 styleUrls: ['./demopet.scss'],
 templateUrl: './demopet.html'
})
export class DemoPetComponent {

 private sub: Subscription;
 public dataArr: any;
 public dataItem: any;
 public language: string = 'en';
 public param = {value: 'world'};

 constructor(
 private store: Store<PetTag>,
 private action: PettagActions
 ) {

 this.dataArr = store.select('pet');
 }

 ngOnInit() {

 this.store.dispatch(this.action.loadData());
 }

 ngOnDestroy() {

 this.sub.unsubscribe();
 }

 info() {

 console.log('info');
 this.dataItem = this.store.select('info');
 this.store.dispatch(this.action.loadInfo());
 }

}

demopet.html

<h1>Demo</h1>



<pre>
 <ul>
 <li *ngFor="let d of dataArr | async"> 
  DEMO : {{ d.msg }}
  <button (click)="info()">info</button>
 </li>
 </ul>

 {{ dataItem | async | json }}

 <h1 *ngFor="let d of dataItem | async"> {{ d.msg }} </h1>
</pre>

6.运行效果

初始化时候获取数据列表

Angular X中使用ngrx的方法详解（附源码） - 文章图片

点击info按钮获取详细详细

Angular X中使用ngrx的方法详解（附源码） - 文章图片

7.以上代码是从项目中取出的部分代码，其中涉及到HttpService需要自己封装，data.json demo.json两个测试用的json文件，名字随便取的当时。

http.service.ts

import { Inject, Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions, URLSearchParams } from '@angular/http';
import { Observable } from "rxjs";
import 'rxjs/add/operator/map';
import 'rxjs/operator/delay';
import 'rxjs/operator/mergeMap';
import 'rxjs/operator/switchMap';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import { handleError } from './handleError';
import { rootPath } from './http.config';

@Injectable()
export class HttpService {

 private _root: string="";

 constructor(private http: Http) {

 this._root=rootPath;
 }

 public get(url: string, data: Map<string, any>, root: string = this._root): Observable<any> {
 if (root == null) root = this._root;
 
 let params = new URLSearchParams();
 if (!!data) {
  data.forEach(function (v, k) {
  params.set(k, v);
  });
 
 }
 return this.http.get(root + url, { search: params })
   .map((resp: Response) => resp.json())
   .catch(handleError);
 }



}

8.模块源代码

下载地址

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

内容总结

以上是互联网集市为您收集整理的Angular X中使用ngrx的方法详解（附源码）全部内容，希望文章能够帮你解决Angular X中使用ngrx的方法详解（附源码）所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/342514.html

来源：【匿名】

【上一篇】angular实现spa单页面应用实例【下一篇】使用AngularJS和PHP的Laravel实现单页评论的方法

更多 ►

【Angular X中使用ngrx的方法详解（附源码）】教程文章相关的互联网学习教程文章

angular 更新表单值的两种方法： setvalue,patchvalue【代码】

使用 patchValue() 方法会比使用 setValue() 方法更好！ 1、patchValue()// angular2/packages/forms/src/model.tsexport class FormGroup extends AbstractControl {...patchValue(value: {[key: string]: any},{onlySelf, emitEvent}: {onlySelf?: boolean, emitEvent?: boolean} = {}): void {Object.keys(value).forEach(name => {if (this.controls[name]) {this.controls[name].patchValue(value[name], {onlySelf: true, em...

angular HttpClient post put patch del 方法（2）-Promise 服务【代码】【图】

前做了在一个页面的CRUD的方法，现实中webapi模块往往是单独写服务的，所以修改了一下原来的设计和结构，还是需要很多知识的。2017.11.15增加patch方法，改进服务程序优化写法2017.11.27增加Promise返回值处理,服务器返回错误信息后的处理.因为所有的CRUD方法都写在服务中，所以后台的代码就简单多了，回调还需要详细信息什么的，总之已经能运行正常了： 1 import { Component, OnInit } from ‘@angular/core‘;2 import { Pati...

angular的bootstrap方法【代码】

使用 angular 写程序的开发都知道，要想使用 angular 应用能够运行，需要在页面中 “登录” 它，我们常用的方法是这样的：<!DOCTYPE html><html ng-app=‘myApp‘><head><meta charset=‘utf-8‘><script src=‘angular.js‘></script></head><body><div id=‘text‘ ng-controller=‘myCtrl‘></div><script>var app = angular.module("myApp",[]);app.controller("myCtrl",function($scope){console.log(1);})</script></body></...

angular内置方法---序列化、反序列化【代码】

toJson:将对象或者数组序列化为json格式的字符串fromJson：相反的过程 1 <!DOCTYPE html>2 <html ng-app="myApp">3 <head lang="en">4 <meta charset="UTF-8">5 <title></title>6 <script src="js/angular.js"></script>7 </head>8 <body>910 <div ng-controller="myCtrl"> 1112 </div> 1314 <script> 15var app = angular.module(‘myApp‘, [‘ng‘]); 1617 app.controller(‘myCtrl‘, function ($scope) { 1819//反序...

Angularjs js方法参数动态传入【代码】

$scope.pageNumberCount = 10;<li ng-repeat="i in pageNumberCount"> <a ng-click="clickPagination(i)">{{i}}</a>  </li>原文：http://my.oschina.net/moks/blog/530325

angular.element方法汇总

转载 addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中...

angular HttpClient getbyid 方法获取数据【代码】【图】

续上一篇之后，简单传参的方法，最常用的是getbyid 方法。直接上代码：getbyId(id: string) {this.myhttp.get(‘http://192.168.2.139:9002/api/patients/‘ + id).subscribe(data => {this.myPatient = new Patient({id: data[‘PatientId‘],FirstName: data[‘Details‘].FirstName,LastName: data[‘Details‘].LastName,MiddleName: data[‘Details‘].MiddleName,BirthDate: data[‘Details‘].BirthDate,Gender: data[‘Det...

细说angular Form addControl方法【代码】【图】

在本篇博文中，我们将接触angular的验证。angular的验证是由form 指令和ngModel协调完成的。今天博主在这里想要说的是在验证在的一种特殊情况，当验证控件没有没有name属性这是不会被form捕获的。或者是你希望在ngRepeat中使用动态表达式。下面且让我们先来从angular源码中看起如下：首先是ngModel:?123456789101112131415161718varngModelDirective = function() { return{ require: [‘ngModel‘, ‘^?form‘], ...

angular.element方法汇总

addClass()-为每个匹配的元素添加指定的样式类名after()-在匹配元素集合中的每个元素后面插入参数所指定的内容，作为其兄弟节点append()-在每个匹配元素里面的末尾处插入参数内容attr() - 获取匹配的元素集合中的第一个元素的属性的值bind() - 为一个元素绑定一个事件处理程序children() - 获得匹配元素集合中每个元素的子元素，选择器选择性筛选clone()-创建一个匹配的元素集合的深度拷贝副本contents()-获得匹配元素集合中每个元...

angularjs中ajax请求时传递参数的方法【代码】

method1方法使用的是params参数，该用法会把参数直接附加到url中method2方法使用的是data参数，该参数会把页面参数类型从默认的multipart/form-data改为application/x-www-form-urlencoded类型，并且将传递的data解析为字符串，该方法会以post参数的方式传递下面是代码部分：<html ng-app="myApp"><head><title>angularjs-ajax</title><script type="text/javascript" src="../../lib/ionic/js/angular/angular.min.js" charset="u...

AngularJS 控制器的方法

AngularJS 控制器也有方法(变量和函数)<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible"content="IE=edge" /> <meta name="viewport"content="width=device-width,initial-scale=1" /> <!--[if lt IE 9]> <script src="http://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script> <script src="http://a...

angular在服务中调用组件的某个方法，并传参给组件，（反向调用），变量改变后，强制更新视图【代码】

需要被调用方法的组件文件import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from ‘@angular/core‘;import { SettingsService } from ‘@delon/theme‘;import { SetdataService } from ‘./setdata.service‘import { NgZone } from ‘@angular/core‘;@Component({ selector: ‘layout-header‘, templateUrl: ‘./header.component.html‘, changeDetection: ChangeDetectionStrategy.OnPush,})export cl...

AngularJS方法 —— angular.copy【图】

描述：　　复制一个对象或者一个数组（好吧，万物皆对象，数组也是一个对象）。如果省略了destination，一个新的对象或数组将会被创建出来；如果提供了destination，则source对象中的所有元素和属性都会被复制到destination中；如果source不是对象或数组（例如是null或undefined）, 则返回source；如果source和destination类型不一致，则会抛出异常。注意：这个是单纯复制覆盖，不是类似继承使用方法：　　angular.copy(source, ...

angular自定义指令在指令里面调用父作用域里面的方法传参【图】

使用自定义指令的时候在指令里面调用父作用域里面的方法，在指令里面在父作用域里面的模板里面使用指令在控制器里面原文：http://www.cnblogs.com/fanzhengshao/p/6006220.html

angular指令监听ng-repeat渲染完成后执行自定义事件方法【代码】

今天工作中遇到需要用到ng-repeat遍历渲染完后执行某个操作，angular本身并没有提供监听ng-repeat渲染完成的指令，所以需要自己创建自定义指令。在ng-repeat模板实例内部会暴露出一些特殊属性$index/$first/$middle/$last/$odd/$even，$index会随着每次遍历（从0开始）递增，当遍历到最后一个时，$last的值为true，所以可以通过判断$last的值来监听ng-repeat的执行状态，怎么在遍历过程中拿到$last的值：自定义指令var app = angul...

ANGULAR - 技术教程分类

Angular 2 教程 Angular 2 架构 Angular 2 数据显示 Angular 2 用户输入 Angular 2 表单 Angular 2 模板语法 angular 全部

ANGULAR - 最热教程

在Angular中如何实现查询天气预报 AngularJS服务service用法总结 Angular.JS中指令ng-if的注意事项小结 AngularJS 异步解决实现方法使用AngularJS和PHP的Laravel实现单页评...AngularJS控制器继承自另一控制器 spring+angular实现导出excel的实现代码关于AngularJS中ng-repeat不更新视图的...在Angular5中如何调用第三方js插件（详...Angular入口组件与声明式组件使用详解

首页 / ANGULAR / Angular X中使用ngrx的方法详解（附源码）

Angular X中使用ngrx的方法详解（附源码）

内容导读

内容图文

内容总结

内容备注

内容手机端

【Angular X中使用ngrx的方法详解（附源码）】教程文章相关的互联网学习教程文章

ANGULAR - 技术教程分类

ANGULAR - 最新教程

ANGULAR - 最热教程