[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 ...
随机推荐
- 9.Java通过axis调用WebService
转自:https://www.cnblogs.com/fu-yun/p/4553685.html 包含:axis.jar,commons-discovery.jar,commons-logging-1 ...
- AC自动机 hdu2222
#include <iostream> using namespace std; struct Node{ Node *next[]; Node* fail; int count; Nod ...
- Strtus2学习
Struts 2 体系结构 : 1.Web浏览器请求一个资源. 2.过滤器Dispatcher查找方法,确定适当的Action. 3.拦截器自动对请求应用通用功能,如验证和文件上传操作. 4.Acti ...
- Fragment-如何监听fragment中的回退事件与怎样保存fragment状态
一.如何监听Fragment中的回退事件 1.问题阐述 在Activity中监听回退事件是件非常容易的事,因为直接重写onBackPressed()函数就好了,但当大家想要监听Fragment中的回退 ...
- HDU 4107 Gangster
Gangster Time Limit: 1000ms Memory Limit: 32768KB This problem will be judged on HDU. Original ID: 4 ...
- js08--函数1
函数当成类看当成匿名对象看,都是跟java吻合的,只有当成函数看(函数自己可以执行)跟java区别在这里. function fact(){} var F = fact ; 函数名是函数对象的地址,是 ...
- [NOI.AC#40]Erlang
链接 题解 显然,最多抽2个集合 如果一直抽一个,前提是该集合有重复的,答案是不同元素的个数+1 如果抽两个,那么最坏情况下,在一个集合中抽到某一个数的次数是这个集合不同元素的个数(因为抽不到重复的) ...
- 李笑来~执行力WWH
什么是秘密 秘密是指只有极少数人知道的实用信息.这个实用信息可以为知道且懂得运用的人获得收益,这个收益可能包括钱.名声和快感. 什么是执行力 执行力=What + Why + How,即WWH 执行力 ...
- spring jdbcTemplate使用queryForList示例
查询代码: LogVo 日志要显示的内容(Log的部分或者全部列) Log是日志完整的实体 public List<LogVO> findLogByDate(String startDat ...
- 洛谷 P1416 攻击火星
P1416 攻击火星 题目描述 一群外星人将要攻击火星. 火星的地图是一个n个点的无向图.这伙外星人将按照如下方法入侵,先攻击度为0的点(相当于从图中删除掉它),然后是度为1的点,依此类推直到度为n- ...