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

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

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

在项目中常常会使用 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
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • redis数据同步工具redis-shake之两服务器之间数据实时同步案例(0个评论)
    • redis中INCR、SETNX、SET三种加锁方式详解(0个评论)
    • redis安全配置之修改端口、添加密码流程步骤及启动使用(0个评论)
    • redis实现分页(0个评论)
    • Redis应用场景限流算法之一,计数器算法代码(0个评论)
    • 近期文章
    • 在Laravel应用程序如何减少代码重复编写(0个评论)
    • 在laravel项目中提高安全性方式推荐:CSP内容安全策略(0个评论)
    • 在go语言中从值中获取常量名称代码示例(0个评论)
    • 在go语言中如何通过名称获得结构字段和值代码示例(0个评论)
    • 在go语言中用JQuery + html2canvas实现拍摄浏览器的屏幕截图示例(0个评论)
    • 人生感悟分享:讲一个大学毕业生到社畜老狗的蜕变心路历程(0个评论)
    • laravel9框架报错Target class... does not exist解决方式(0个评论)
    • Laravel 9.48版本发布(0个评论)
    • Meta高级工程师现身说法:程序员干得越久,代码写得越少?(0个评论)
    • 本站zongscan祝大家除夕快乐,2023有奔头(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-12
    • 2020-03
    • 2020-05
    • 2021-04
    • 2022-03
    • 2022-05
    • 2022-08
    Top

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

    侯体宗的博客