[Angular] Write Compound Components with Angular’s ContentChild
Allow the user to control the view of the toggle component. Break the toggle component up into multiple composable components that can be rearranged by the app developer.
Compound component mainly for rendering flexibility. It hides the implements detial from users, but users can freely re-order the child component order or add new component into it.
In this post we are looking into how to apply "@ConetentChild" to do compound components.
This is not a recommended way, just for learning!
So a highlevel compound component looks like:
<toggle (toggle)="onToggle($event)">
<toggle-button></toggle-button>
<toggle-on>On</toggle-on>
<toggle-off>Off</toggle-off>
</toggle>
For the parent component 'toggle' component, the job for it is hide implement details from the consumers. It handles the internal state. Which means 'toggle' component needs to access the state of its Children components.
<toggle-button></toggle-button>
<toggle-on>On</toggle-on>
<toggle-off>Off</toggle-off>
The way to can accomplish it is using '@ContentChild':
@ContentChild(ToggleOnComponent) toggleOn: ToggleOnComponent;
@ContentChild(ToggleOffComponent) toggleOff: ToggleOffComponent;
@ContentChild(ToggleButtonComponent) toggleButton: ToggleButtonComponent;
Listen for Child component's ouput event:
toggle-button component has Output event call 'toggle':
@Component({
selector: 'toggle-button',
template: '<switch [on]="on" (click)="onClick()" ></switch>',
})
export class ToggleButtonComponent {
@Input() on: boolean;
@Output() toggle: EventEmitter<boolean> = new EventEmitter();
onClick() {
this.on = !this.on;
this.toggle.emit(this.on);
}
}
Then we can listen the Output event in 'ngAfterContentInit()' lifecycle hooks.
ngAfterContentInit() {
this.toggleButton.toggle.subscribe(on => {
this.on = on;
this.toggle.emit(on);
this.update();
});
}
Also 'toggle' component will take care to update Children components state:
update() {
this.toggleOn.on = this.on;
this.toggleOff.on = this.on;
this.toggleButton.on = this.on;
}
[Angular] Write Compound Components with Angular’s ContentChild的更多相关文章
- [Angular] Communicate Between Components Using Angular Dependency Injection
Allow more than one child component of the same type. Allow child components to be placed within the ...
- [Angular 2] Angular 2 Smart Components vs Presentation Components
Both Smart Components and Presentation Components receive data from Services in entirely different w ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- 在angular项目中使用web-component ----How to use Web Components with Angular
原文: https://medium.com/@jorgecasar/how-to-use-web-components-with-angular-41412f0bced8 ------------- ...
- angular源码分析:angular中脏活累活的承担者之$interpolate
一.首先抛出两个问题 问题一:在angular中我们绑定数据最基本的方式是用两个大括号将$scope的变量包裹起来,那么如果想将大括号换成其他什么符号,比如换成[{与}],可不可以呢,如果可以在哪里配 ...
- angular源码分析:angular中入境检察官$sce
一.ng-bing-html指令问题 需求:我需要将一个变量$scope.x = '<a href="http://www.cnblogs.com/web2-developer/&qu ...
- angular的跨域(angular百度下拉提示模拟)和angular选项卡
1.angular中$http的服务: $http.get(url,{params:{参数}}).success().error(); $http.post(url,{params:{参数}}).su ...
- angular源码分析:angular的整个加载流程
在前面,我们讲了angular的目录结构.JQLite以及依赖注入的实现,在这一期中我们将重点分析angular的整个框架的加载流程. 一.从源代码的编译顺序开始 下面是我们在目录结构哪一期理出的an ...
- angular源码分析:angular中jqLite的实现——你可以丢掉jQuery了
一.从function JQLite(element)函数开始. function JQLite(element) { if (element instanceof JQLite) { //情况1 r ...
随机推荐
- 利用pyautogui自动化领取dnf的在线养竹活动的竹子
背景: Dnf的周年庆活动之一,鬼才策划为了在线率想的活动,规律如下 1.在线1分钟可以生成1根竹子,领取竹子以后可以获取到积分,积分满足活动要求后可以领取相应档位的奖励 2.玩家不在线期间,不会生成 ...
- 多线程test
import java.io.UnsupportedEncodingException; import java.util.HashMap; import java.util.Map; import ...
- jQuery闪烁提示,让新消息在网页标题显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head& ...
- 企业级监控nagios实践
nagios 监控服务应用指南 小区:视频监控,保安 企业工作中为什么要部署监控系统 监控系统相当于哨兵的作用,监控几百台上千台服务器,监控系统非常重要. 监控系统都需要监控 1. 本地资源:负载up ...
- tornado框架基础07-sqlalchemy查询
01 查询结果 上节使用query从数据库中查询到了结果,但是query返回的对象是直接可用的吗? 首先导入模块 from connect import session from user_modul ...
- Android开发——GPS定位
1.LocationManager LocationManager系统服务是位置服务的核心组件,它提供了一系列方法来处理与位置相关的问题. 与LocationManager相关的两个知识点: 1.1 ...
- ubuntu修改apt-get源为国内镜像源
1.原文件备份 sudo cp /etc/apt/sources.list /etc/apt/sources.list.bak 2.编辑源列表文件 sudo vim /etc/apt/so ...
- 【转】亿级Web系统搭建——单机到分布式集群
当一个Web系统从日访问量10万逐步增长到1000万,甚至超过1亿的过程中,Web系统承受的压力会越来越大,在这个过程中,我们会遇到很多的问题.为了解决这些性能压力带来问题,我们需要在Web系统架构层 ...
- python和shell获取命令行参数的区别
一.命令行参数的取得对于一些功能性的脚本来说非常有用,不至于将功能写死在脚本中. shell的命令行参数直接用 $ 1,$2 等就可以直接获取 其中 $1 表示 第二个参数,即命令行的第一个参数,因为 ...
- Go 方法和接收者
package main import ( "fmt" ) //面向对象 //go仅支持封装,不支持继承和多态 //go语言中没有class,只要struct //不论地址还是结构 ...