侯体宗的博客
  • 首页
  • Hyperf2.1版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

第三章 Redis/SSDB+Twemproxy安装与使用

Redis  /  管理员 发布于 2年前   182

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

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

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

 

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, private vc: ViewContainerRef) {} @Input() set appRepeatIn(val: Array) {  val.forEach((item, index) => {   this.vc.createEmbeddedView(this.tpl, {    $implicit: item,    index: index,    even: index % 2 === 0,    odd: index % 2 === 1   });  }); }}
    • index: {{ index }}
    • item: {{ item }}
    • default: {{ defualt }}
    • even: {{ even }}
    • odd: {{ odd }}

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

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中如何创建一个简单的结构指令,指令展开的微语法(展开形式,传入数据,赋值操作),使用createEmbeddedView和TemplateRef来创建dom元素。如有疑问,可以查看源代码 或者在下面留言~

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

您可能感兴趣的文章:

  • AngularJS ng-repeat指令及Ajax的应用实例分析
  • AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
  • AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
  • Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
  • AngularJS使用自定义指令替代ng-repeat的方法
  • AngularJS使用ng-repeat指令实现下拉框
  • AngularJS基础 ng-repeat 指令简单示例
  • AngularJS入门(用ng-repeat指令实现循环输出
  • AngularJS学习笔记之基本指令(init、repeat)

去评论


  • 上一条:
    第五章 常用Lua开发库1-redis、mysql、http客户端
    下一条:
    redis的failover ,redmon安装
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • TP(3/5)
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • redis实现分页(0个评论)
    • Redis应用场景限流算法之一,计数器算法代码(0个评论)
    • 全网不一定最好的一篇Redis面试题解答详解,有补充希望您在底部留言(0个评论)
    • Redis为什么这么快(1个评论)
    • 近期文章
    • Laravel 9.13版本发布(0个评论)
    • beego+GeoLite2免费数据库获取ip地址经纬度等定位归属信息(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • PHP + Memcache实现简单的统计当前在线人数功能(0个评论)
    • Thinkphp5.1框架中实现Session+Redis会话共享流程步骤(0个评论)
    • go语言中使用Signbit()函数判断一个整数是正数或负数(0个评论)
    • 删库跑路之一链家程序员删除公司9TB数据被判7年,望各大码农警之!(0个评论)
    • Laravel角色和权限:拦截器Gates和策略Policies的解释(0个评论)
    • Laravel 9.12版本发布(0个评论)
    • go语言中实现把数据写入文件函数WriteFile()编写(0个评论)
    • 近期评论
    • 博主 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 @路过的靓仔:cdn静态资源被墙,已修复..
    • GGGGGGGGG 在

      layui框架常用输入框介绍中评论 写的很好解决问题..
    • 路过的靓仔 在

      hyperf框架常用命令-在centos7中退出命令及在docker容器中退出命令中评论 剩下好多 wait 状态的..
    • 激光豆芽 在

      为什么你不能安逸?国内996为什么没有国外955香?中评论 国内现在无意义的内卷太多了..
    • 激光豆芽 在

      阿里云香港服务器搭建自用vpn:Shadowsocks使用流程步骤中评论 厉害了..
    • 2017-12
    • 2020-03
    • 2020-05
    • 2021-04
    • 2022-03
    • 2022-05
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客