[Angular] Expose Angular Component Logic Using State Reducers
A component author has no way of knowing which state changes a consumer will want to override, but state reducers handle this problem by allowing the parent component to override any state change.
In Short, we want to have a way to override the component's internal state from outside. The reason for that is there maybe some requirements from the users who want to override component internal state for whatever reason.
The state reducer can accomplish this task, so what is state reducer? It is just a fansic name form some smart developers. State reducer is a function which two two params, one is old state, another one is changes going to be happen, return value is the new state.
export type ToggleStateReducer =
(state: ToggleState, changes: Partial<ToggleState>)
=> ToggleState;
So inside toggle.component.ts, we accept an @Input() stateReducer:
@Input() stateReducer: ToggleStateReducer =
(state, changes) => ({ ...state, ...changes });
Whenenver we need to change toggle component internal state, we call stateReducer:
setOnState(on: boolean) {
const oldState = { on: this.on };
const newState = this.stateReducer(oldState, { on });
if (oldState !== newState) {
this.on = newState.on;
this.toggled.emit(this.on);
}
}
That's all what we need to for component part. Just make stateReducer as a input, call each time we need to udpate our internal state, we call thought stateReducer to get new state.
So now, from the consumer component, we can control the state update:
// app.component.ts: stateReducer = (state: ToggleState, changes: Partial<ToggleState>) => {
if (this.timesClicked > ) {
return state;
}
if (changes.on !== undefined) {
this.timesClicked = this.timesClicked + ;
}
return { ...state, ...changes };
}
<toggle (toggled)="log('toggle', $event)" [stateReducer]="stateReducer">
<ng-template let-on="on" let-fns="fns">
<switch [on]="on" toggler (click)="fns.toggle()">
</switch>
</ng-template>
</toggle>
[Angular] Expose Angular Component Logic Using State Reducers的更多相关文章
- Exploring the Angular 1.5 .component() method
Angular 1.5 introduced the .component() helper method, which is much simpler than the.directive() de ...
- [Angular] Use Angular components in AngularJS applications with Angular Elements
When migrating AngularJS (v1.x) applications to Angular you have different options. Using Angular El ...
- angular 2 angular quick start Could not find HammerJS
Angular2 的material中 引用了 hammerjs,遇到Could not find HammerJS错误,正确的步骤如下: 需要在如下位置增加 对material 和 hammerjs ...
- ASP.NET Core 2.1 Web API + Identity Server 4 + Angular 6 + Angular Material 实战小项目视频
视频简介 ASP.NET Core Web API + Angular 6的教学视频 我是后端开发人员, 前端的Angular部分讲的比较差一些, 可以直接看代码!!!! 这是一个小项目的实战视频, ...
- [Angular] Refactor Angular Component State Logic into Directives
Allow the base toggle to be a tag (<toggle>) or attribute (<div toggle>). The <toggle ...
- [Angular] Two ways to create Angular Animation, using animation() or using state()
We have two blocks to show to difference ways to do animation in Angular: <button (click)="t ...
- Angular(二) - 组件Component
1. 组件Component示例 2. Component常用的几个选项 3. Component全部的选项 3.1 继承自@Directive装饰器的选项 3.2 @Component自己特有的选项 ...
- [Angular 2] Passing Template Input Values to Reducers
Angular 2 allows you to pass values from inputs simply by referencing them in the template and passi ...
- [Angular] Use Angular’s @HostBinding and :host(...) to add styling to the component itself
One thing that we can do is to add styles directly to HTML elements that live within our component. ...
随机推荐
- easyui权限管理
在easyui上实现权限的管理 所谓权限:指的是系统中的资源,资源包括菜单资源(学习情况报表,账号审核...)以及按钮资源所谓角色:指的是系统中的权限集合(每一个角色对应着哪些权限集合) 1.一星权限 ...
- pooling需要注意的一个地方
max pooling 在不同的 depth 上是分开执行的,且不需要参数控制.也就是说,pooling之后,feature map的维度不会改变
- Chrome安装助手踩坑
[前言] 最近用之前的方法配置hosts,想浏览下载国外网站的数据和插件,突然发现几乎所有的方法都无效了...... 本文介绍下下载谷歌助手,通过助手访问国外网站 [主体] (1)搜索谷歌助手,点击下 ...
- windows cmd 模仿电影黑客
1.win+R 2.输入cmd 3.按F11进入全屏 4.color a 改变颜色为绿色(可能看起来秀一点) 5.dir/s 查看所有文件,就跑起来了,看起来很酷,但是在懂得人眼里,没什么的(所以只能 ...
- strong&weak
copy:建立一个索引计数为1的对象,然后释放旧对象 对NSString对NSString 它指出,在赋值时使用传入值的一份拷贝.拷贝工作由copy方法执行,此属性只对那些实行了NSCopying协议 ...
- C++之类成员的访问权限详解(一)
概念解析 众所周知,面向对象编程语言的特征之一就是封装,不同编程语言对于封装提供的实现有所不同,但原理大体上是相同的.C++提供了三种不同程度的访问权限来实现,主要是通过public.private. ...
- Css选择器和JQuery基本编程接口
使用JQuery之前,首先从官网下载库文件 http://jquery.com/ jquery-2.1.4.js和jquery-2.1.4.min.js,前者是完整无压缩版本,用于开发调试:后者是压缩 ...
- 修改centos的yum源为国内的源
1.安装Centos后默认的Yum源如下 ll /etc/yum.repos.d/ [root@localhost ~]# ll /etc/yum.repos.d/ total 32 -rw-r- ...
- XTU 二分图和网络流 练习题 B. Uncle Tom's Inherited Land*
B. Uncle Tom's Inherited Land* Time Limit: 1000ms Memory Limit: 32768KB 64-bit integer IO format: %I ...
- SPOJ LCS 后缀自动机找最大公共子串
这里用第一个字符串构建完成后缀自动机以后 不断用第二个字符串从左往右沿着后缀自动机往前走,如能找到,那么当前匹配配数加1 如果找不到,那么就不断沿着后缀树不断往前找到所能匹配到当前字符的最大长度,然后 ...