浅析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 相关文章推荐
再次分享18个非常棒的jQuery表格插件
Apr 10 Javascript
js判断undefined类型,undefined,null, 的区别详细解析
Dec 16 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
js实现常用排序算法
Aug 09 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
Mar 07 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
vue实现图书管理demo详解
Oct 17 Javascript
vue全局组件与局部组件使用方法详解
Mar 29 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
简单了解JavaScript sort方法
Nov 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实现图片等比例放大和缩小的方法详解
2013/06/06 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
jQuery实战之仿淘宝商城左侧导航效果
2011/04/12 Javascript
jQuery contains过滤器实现精确匹配使用方法
2013/04/12 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
Js与Jq获取浏览器和对象值的方法
2016/03/18 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
mac中利用NVM管理不同node版本的方法详解
2017/11/08 Javascript
详解vue-meta如何让你更优雅的管理头部标签
2018/01/18 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
关于vue-cli 3配置打包优化要点(推荐)
2019/04/22 Javascript
Vue移动端用淘宝弹性布局lib-flexible插件做适配的方法
2020/05/26 Javascript
js简单实现自动生成表格功能示例
2020/06/02 Javascript
Vue实现点击箭头上下移动效果
2020/06/11 Javascript
Vue axios获取token临时令牌封装案例
2020/09/11 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
python 实现文件的递归拷贝实现代码
2012/08/02 Python
Python中几种导入模块的方式总结
2017/04/27 Python
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
Go/Python/Erlang编程语言对比分析及示例代码
2018/04/23 Python
Python爬取qq空间说说的实例代码
2018/08/17 Python
win10下python3.5.2和tensorflow安装环境搭建教程
2018/09/19 Python
33个Python爬虫项目实战(推荐)
2019/07/08 Python
Softmax函数原理及Python实现过程解析
2020/05/22 Python
Python性能测试工具Locust安装及使用
2020/12/01 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
党员志愿者活动总结
2014/06/26 职场文书
网络技术专业求职信
2014/07/13 职场文书
手机被没收的检讨书
2014/10/04 职场文书
滞留工资返还协议书
2014/10/19 职场文书
课堂打架检讨书200字
2014/11/21 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2016十一国庆节感言
2015/12/09 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android