浅析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 相关文章推荐
js 通过cookie实现刷新不变化树形菜单
Oct 30 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
Oct 23 Javascript
Bootstrap树形组件jqTree的简单封装
Jan 25 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 Javascript
electron+vue实现div contenteditable截图功能
Jan 07 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
Vue使用自定义指令实现拖拽行为实例分析
Jun 06 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
JavaScript实现点击出现子菜单效果
Feb 08 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
Apr 06 Vue.js
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和ACCESS写聊天室(九)
2006/10/09 PHP
php获取地址栏信息的代码
2008/10/08 PHP
在html文件中也可以执行php语句的方法
2015/04/09 PHP
php实现mysql数据库分表分段备份
2015/06/18 PHP
joomla组件开发入门教程
2016/05/04 PHP
PHP简单数据库操作类实例【支持增删改查及链式操作】
2016/10/10 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
Ajax+PHP实现的删除数据功能示例
2019/02/12 PHP
实例化php类时传参的方法分析
2020/06/05 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
Angular 中 select指令用法详解
2016/09/29 Javascript
Javascript中数组去重与拍平的方法示例
2017/02/03 Javascript
基于LayUI实现前端分页功能的方法
2017/07/22 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue实现div拖拽互换位置
2020/07/29 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
[01:12:35]Spirit vs Navi Supermajor小组赛 A组败者组第一轮 BO3 第二场 6.2
2018/06/03 DOTA
Python中用altzone()方法处理时区的教程
2015/05/22 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python实现图片滑动式验证识别方法
2017/11/09 Python
django允许外部访问的实例讲解
2018/05/14 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
python list转置和前后反转的例子
2019/08/26 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
Python笔记之facade模式
2019/11/20 Python
Jupyter加载文件的实现方法
2020/04/14 Python
澳大利亚在线时尚精品店:Hello Molly
2018/02/26 全球购物
标签和贴纸印刷:Lightning Labels
2018/03/22 全球购物
2014县委书记四风对照检查材料思想汇报
2014/09/21 职场文书
实习单位推荐信
2015/03/27 职场文书
基于JavaScript实现年月日三级联动
2021/06/22 Javascript