浅析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 相关文章推荐
$.ajax json数据传递方法
Nov 19 Javascript
Jquery 1.42 checkbox 全选和反选代码
Mar 27 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐二)
Jul 12 Javascript
JS简单生成两个数字之间随机数的方法
Aug 03 Javascript
vue实现ToDoList简单实例
Feb 07 Javascript
angularjs封装$http为factory的方法
May 18 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 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
GD输出汉字的函数的分析
2006/10/09 PHP
php获取远程图片的两种 CURL方式和sockets方式获取远程图片
2011/11/07 PHP
详解WordPress中提醒安装插件以及隐藏插件的功能实现
2015/12/25 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
JS应用之禁止抓屏、复制、打印
2008/02/21 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
2010/09/03 Javascript
jquery获取多个checkbox的值异步提交给php
2015/07/07 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
JS代码实现table数据分页效果
2016/05/26 Javascript
bootstrap的工具提示实例代码
2017/05/17 Javascript
node中使用es5/6以及支持性与性能对比
2017/08/11 Javascript
JavaScript全屏和退出全屏事件总结(附代码)
2017/08/17 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
小程序实现投票进度条
2019/11/20 Javascript
python3实现TCP协议的简单服务器和客户端案例(分享)
2017/06/14 Python
对Python中内置异常层次结构详解
2018/10/18 Python
python-opencv颜色提取分割方法
2018/12/08 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
[机器视觉]使用python自动识别验证码详解
2019/05/16 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
想学画画?python满足你!
2020/12/24 Python
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
New Era英国官网:美国棒球帽品牌
2018/03/21 全球购物
eharmony澳大利亚:网上约会服务
2020/02/29 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
《假如》教学反思
2014/04/17 职场文书
买卖合同协议书范本
2014/10/18 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
网络安全倡议书(3篇)
2019/09/18 职场文书