浅析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 相关文章推荐
用 javascript 实现的点击复制代码
Mar 24 Javascript
Cookie 注入是怎样产生的
Apr 08 Javascript
jquery中event对象属性与方法小结
Dec 18 Javascript
JS获取下拉框显示值和判断单选按钮的方法
Jul 09 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)
Sep 06 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 Javascript
Bootstrap告警框(alert)实现弹出效果和短暂显示后上浮消失的示例代码
Aug 27 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如何透过ODBC来存取数据库
2006/10/09 PHP
URI、URL和URN之间的区别与联系
2006/12/20 Javascript
javascript getElementsByClassName函数
2010/04/01 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
javascript 判断字符串是否包含某字符串及indexOf使用示例
2013/10/18 Javascript
vue监听滚动事件实现滚动监听
2017/04/11 Javascript
深入理解Javascript中的作用域链和闭包
2017/04/25 Javascript
Vue.js实现表格渲染的方法
2018/09/07 Javascript
JS实现页面跳转与刷新的方法汇总
2019/08/30 Javascript
vue.js的状态管理vuex中store的使用详解
2019/11/08 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
2020/06/17 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
python使用sorted函数对列表进行排序的方法
2015/04/04 Python
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
用Python实现服务器中只重载被修改的进程的方法
2015/04/30 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
python使用正则表达式的search()函数实现指定位置搜索功能
2017/11/10 Python
python 反向输出字符串的方法
2018/07/16 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
Python assert语句的简单使用示例
2019/07/28 Python
Python 批量刷博客园访问量脚本过程解析
2019/08/30 Python
使用python实现画AR模型时序图
2019/11/20 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
芝加哥牛排公司:Chicago Steak Company
2018/10/31 全球购物
介绍一下gcc特性
2015/10/31 面试题
社区国庆节活动方案
2014/02/05 职场文书
大学生素质拓展活动方案
2014/02/11 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
清洁工岗位职责
2015/02/13 职场文书
fastdfs+nginx集群搭建的实现
2021/03/31 Servers
MongoDB使用profile分析慢查询的步骤
2021/04/30 MongoDB
python处理json数据文件
2022/04/11 Python