浅析Angular 实现一个repeat指令的方法


Posted in Javascript onJuly 21, 2019

在项目中常常会使用 ngFor指令,之前只会使用它,具体如何实现的却不得而知。终于这几天有时间"研究"了下它是如何实现的,顺便自己写个简单的 ngFor指令:repeat

说到指令就不得不提一下TemplateRef和ViewContainerRef

TemplateRef 可以理解为dom渲染模板,指令通过TemplateRef的模板来创建dom元素
ViewContainerRef 可以理解为TemplateRef的容器,在调用ViewContainerRef上的createEmbeddedView时,传入TemplateRef和context就能创建出dom元素 此外还需要说明的是Angular的微语法,详见下图。

浅析Angular 实现一个repeat指令的方法 

Angular会把微语法展开成ng-template的形式,支持传入参数, TemplateRef
所关联的则是ng-template内的内容,let variable则是声明变量,如果后面没有赋值操作,则这个变量取默认值。这里取值和createEmbeddedView方法的context相关(后面会细说)。

代码示例:

import { Directive, Input, TemplateRef, ViewContainerRef } from "@angular/core";
@Directive({
 selector: "[appRepeat]"
})
export class RepeatDirective {
 constructor(private tpl: TemplateRef<any>, private vc: ViewContainerRef) {}
 @Input() set appRepeatIn(val: Array<any>) {
  val.forEach((item, index) => {
   this.vc.createEmbeddedView(this.tpl, {
    $implicit: item,
    index: index,
    even: index % 2 === 0,
    odd: index % 2 === 1
   });
  });
 }
}
<ul>
 <li
  *appRepeat="
   let item;
   in: items;
   let index = index;
   let even = even;
   let odd = odd;
   let defualt
  "
 >
  <ul class="{{ even ? 'even' : 'odd' }}">
   <li>index: {{ index }}</li>
   <li>item: {{ item }}</li>
   <li>default: {{ defualt }}</li>
   <li>even: {{ even }}</li>
   <li>odd: {{ odd }}</li>
  </ul>
 </li>
</ul>

通过上面的代码可以知道:

let 声明变量(index,even,odd)可以使用createEmbeddedView方法传入context 的属性值(index,even,odd)进行赋值,如果只声明了变量并无赋值操作,则会使用context的属性值($implicit)进行赋值。

keyExp 为 Directive 声明Input属性,Directive的Input属性名格式为"[selector]key",遵循CamelCase命名规则,例如上面的例子:

selector: "appRepeat"
key: "in"

则命名为:"appRepeatIn"。

Directive 可以通过Input传入的数据来进行创建页面视图

总结:通过本文可以知道在Angular中如何创建一个简单的结构指令,指令展开的微语法(展开形式,传入数据,赋值操作),使用createEmbeddedViewTemplateRef来创建dom元素。如有疑问,可以查看源代码 或者在下面留言~

以上所述是小编给大家介绍的Angular 实现一个repeat指令的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言小编会及时回复大家的!

Javascript 相关文章推荐
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
Mar 21 Javascript
javascript 内存回收机制理解
Jan 17 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
用javascript添加控件自定义属性解析
Nov 25 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
总结JavaScript设计模式编程中的享元模式使用
May 21 Javascript
用jQuery的AJax实现异步访问、异步加载
Nov 02 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
Vue.js开发环境快速搭建教程
Mar 17 Javascript
mui上拉加载功能实例详解
Apr 13 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
Jul 21 #Javascript
Vue中遍历数组的新方法实例详解
Jul 21 #Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 #Javascript
jquery插件开发模式实例详解
Jul 20 #jQuery
JS回调函数原理与用法详解【附PHP回调函数】
Jul 20 #Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 #Javascript
JavaScript剩余操作符Rest Operator详解
Jul 20 #Javascript
You might like
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
详解no input file specified 三种解决方法
2019/11/29 PHP
Thinkphp 框架基础之源码获取、环境要求与目录结构分析
2020/04/27 PHP
限制复选框的最大可选数
2006/07/01 Javascript
jquery中使用ajax获取远程页面信息
2011/11/13 Javascript
VS2008中使用JavaScript调用WebServices
2014/12/18 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
AngularJS控制器之间的数据共享及通信详解
2016/08/01 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
走进AngularJs之过滤器(filter)详解
2017/02/17 Javascript
jQuery实现用户信息表格的添加和删除功能
2017/09/12 jQuery
vue.js element-ui validate中代码不执行问题解决方法
2017/12/18 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
jQuery实现的别踩白块小游戏完整示例
2019/01/07 jQuery
一些可能会用到的Node.js面试题
2019/06/15 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
Python实现运行其他程序的四种方式实例分析
2017/08/17 Python
Python贪心算法实例小结
2018/04/22 Python
python开发准备工作之配置虚拟环境(非常重要)
2019/02/11 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
python中open函数的基本用法示例
2019/09/07 Python
Python super()方法原理详解
2020/03/31 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
献爱心捐款倡议书
2014/05/14 职场文书
导游词之包公祠
2019/11/25 职场文书
《天使的翅膀》读后感3篇
2019/12/20 职场文书
python实现会员管理系统
2022/03/18 Python
SpringBoot全局异常处理方案分享
2022/05/25 Java/Android