[Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef
For example we have two buttons:
When we click nether one of those tow button, the modal should show up:
We will use structure directive to do that.
So create a new directive 'auModalOpenOnClick':
import {Directive, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({
selector: '[auModalOpenOnClick]'
})
export class AuModalOpenOnClickDirective { constructor(
private template: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { }
}
A stucture need to use 'TemplateRef' and 'ViewContainerRef'. You can simply think that templateRef refer to the html you are going to show/hide. ViewContainerRef refers to the container that wrap the template/compoent, normally it should be <ng-template>.
HTML:
<ng-template [auModalOpenOnClick]="[loginButton, signUpButton]">
<au-modal class="auth-modal">
<!-- modal content goes here-->
</au-modal>
</ng-template> <div class="modal-buttons"> <button #loginButton>Login</button> <button #signUpButton>Sign Up</button> </div>
So the way we use the directive is that it takes a input which can be array of template ref or just a single templateRef.
We are going to check in the directive, if the passed in templateRef(s) are clicked or not, if it is click, we are going to create a embbed view based on the template (au-modal) we got.
directive:
import {Directive, Input, TemplateRef, ViewContainerRef} from '@angular/core'; @Directive({
selector: '[auModalOpenOnClick]'
})
export class AuModalOpenOnClickDirective { @Input()
set auModalOpenOnClick (els) { let elements: HTMLBaseElement[]; if(Array.isArray(els)) {
elements = els;
} else {
elements = [els];
} elements.forEach(el => {
el.addEventListener('click', () => {
this.viewContainer.clear();
this.viewContainer.createEmbeddedView(this.template);
});
});
} constructor(
private template: TemplateRef<any>,
private viewContainer: ViewContainerRef
) { } }
And also worth to mention that:
<ng-template [auModalOpenOnClick]="[loginButton, signUpButton]">
<au-modal class="auth-modal">
<!-- modal body-->
</au-modal>
</ng-template>
the same as:
<au-modal class="auth-modal"*auModalOpenOnClick="[loginButton, signUpButton]">
<!-- modal body-->
</au-modal>
[Angular] Step-By-Step Implementation of a Structural Directive - Learn ViewContainerRef的更多相关文章
- Tomcat Clustering - A Step By Step Guide --转载
Tomcat Clustering - A Step By Step Guide Apache Tomcat is a great performer on its own, but if you'r ...
- [ZZ] Understanding 3D rendering step by step with 3DMark11 - BeHardware >> Graphics cards
http://www.behardware.com/art/lire/845/ --> Understanding 3D rendering step by step with 3DMark11 ...
- 课程一(Neural Networks and Deep Learning),第四周(Deep Neural Networks)——2.Programming Assignments: Building your Deep Neural Network: Step by Step
Building your Deep Neural Network: Step by Step Welcome to your third programming exercise of the de ...
- Step by step Dynamics CRM 2011升级到Dynamics CRM 2013
原创地址:http://www.cnblogs.com/jfzhu/p/4018153.html 转载请注明出处 (一)检查Customizations 从2011升级到2013有一些legacy f ...
- Step by Step 创建一个新的Dynamics CRM Organization
原创地址:http://www.cnblogs.com/jfzhu/p/4012833.html 转载请注明出处 前面演示过如何安装Dynamics CRM 2013,参见<Step by st ...
- Step by step Install a Local Report Server and Remote Report Server Database
原创地址:http://www.cnblogs.com/jfzhu/p/4012097.html 转载请注明出处 前面的文章<Step by step SQL Server 2012的安装 &g ...
- Step by step Dynamics CRM 2013安装
原创地址:http://www.cnblogs.com/jfzhu/p/4008391.html 转载请注明出处 SQL Server可以与CRM装在同一台计算机上,也可安装在不同的计算机上.演示 ...
- Step by step 活动目录中添加一个子域
原创地址:http://www.cnblogs.com/jfzhu/p/4006545.html 转载请注明出处 前面介绍过如何创建一个域,下面再介绍一下如何在该父域中添加一个子域. 活动目录中的森林 ...
- SQL Server 维护计划实现数据库备份(Step by Step)(转)
SQL Server 维护计划实现数据库备份(Step by Step) 一.前言 SQL Server 备份和还原全攻略,里面包括了通过SSMS操作还原各种备份文件的图形指导,SQL Server ...
随机推荐
- Linux - 用 Konstruct 安装 KDE 3.x
make-kde3.x Linux - 用 Konstruct 安装 KDE 3.x 找个截图工具 khtml2png (http://khtml2png.sourceforge.net/), 现在都 ...
- js08--函数1
函数当成类看当成匿名对象看,都是跟java吻合的,只有当成函数看(函数自己可以执行)跟java区别在这里. function fact(){} var F = fact ; 函数名是函数对象的地址,是 ...
- eclipse个人插件
1.SVN eclipse markets 安装m2e-subversion.svnkit 2.maven 本地装好mvn prefences导入maven安装目录和配置 3.单元测试覆盖率 EclE ...
- actionBarTab-actionBarTab自定义 布局没法改变其中字体相对中间的位置
我们经常遇到对actionBarTab 进行操作的情况.现在记录修改它的样式的方法,已经如何自定义tab的显示布局 1.在你的theme主题中添加<item name="android ...
- Zabbix监控Tomcat,Redis
一 Tomcat监控 1.1.1 Tomcat 端配置 JMX 编辑catalina.sh文件,配置如下: CATALINA_OPTS="$CATALINA_OPTS -Dcom.sun.m ...
- Day3晚笔记
DEV C++扩展栈空间 -Wl,--stack=64000000000 带权二分图匹配 建一个超级源点S,超级汇点T 把左边的点的点权作为权值,连一条S到左边的点的边 把右边的点的点权作为权值,连一 ...
- Android 用Socket实现PC和手机的文件传输
PC服务器端代码: /* * PC与<a href="http://lib.csdn.net/base/android" class='replace_word' title ...
- ecshop微信接口基础认识
ecshop微信接口基础认识,当你要学习ecshop和微信整合的时候,你就必须研究ecshop的数据结构对接以及微信数据接口的基本知识.我们知道微信其实就是通过有效的消息推送,用JSON格式的数据或者 ...
- ToggleButton控件
ToggleButton 两种状态 ·状态button -继承自CompoundButton ·主要属性:-Android:textOn -Android:textOff ·主要方法: ...
- Android DiskLruCache全然解析,硬盘缓存的最佳方案
转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/28863651 概述 记得在非常早之前.我有写过一篇文章Android高效载入大图. ...