[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 ...
随机推荐
- 【基础篇】Android MediaPlayer基本使用方式
使用MediaPlayer播放音频或者视频的最简单例子: JAVA代码部分: public class MediaPlayerStudy extends Activity { private Butt ...
- 动态引入js代码
var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = & ...
- host---域名查询
host命令是常用的分析域名查询工具,可以用来测试域名系统工作是否正常. 选项 -a:显示详细的DNS信息: -c<类型>:指定查询类型,默认值为“IN“: -C:查询指定主机的完整的SO ...
- 阅读笔记—EL表达式
表达式语言(EL) 表达式语言是一种在JSP页面中使用的数据访问语言,通过它可以很方便地在JSP页面中访问应用程序数据. 使用EL访问数据 表达式语言的使用形式: ${exp ...
- Android中关于JNI 的学习(零)简单的样例,简单地入门
Android中JNI的作用,就是让Java可以去调用由C/C++实现的代码,为了实现这个功能.须要用到Anrdoid提供的NDK工具包,在这里不讲怎样配置了,好麻烦,配置了好久. . . 本质上,J ...
- while 循环的理解
if 与 while 的主要区别:if 只判断和执行一次,而 while 却代表着一个循环,执行多少次,要视情况而定: 两种情况(A.B)都会让循环体执行: while A or B: 两种情况(A. ...
- BZOJ2565: 最长双回文串(Manacher)
Description 顺序和逆序读起来完全一样的串叫做回文串.比如acbca是回文串,而abc不是(abc的顺序为“abc”,逆序为“cba”,不相同).输入长度为n的串S,求S的最长双回文子串T, ...
- CISP/CISA 每日一题 21
CISSP 每日一题(答)What is the term that identifies data ona disk after the data has supposedly been erase ...
- javascript中函数声明、变量声明以及变量赋值之间的关系与影响
javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...
- 51NOD——T 1079 中国剩余定理
http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1079 基准时间限制:1 秒 空间限制:131072 KB 分值: 0 难 ...