当前位置: 首页 > news >正文

Angular2组件开发—模板语法(六)

#var - 局部变量

有时模板中的不同元素间可能需要互相调用,Angular2提供一种简单的语法将元素 映射为局部变量:添加一个以#或var-开始的属性,后续的部分表示变量名, 这个变量对应元素的实例。

在下面的代码示例中,我们为元素h1定义了一个局部变量v_h1,这个变量指向 该元素对应的DOM对象,你可以在模板中的其他地方调用其方法和属性:

1 @View({
2     template : `
3         <h1 #v_h1>hello</h1>
4         <button (click)="#v_h1.textContent = 'HELLO'">test</button>
5     `
6 })

如果在一个组件元素上定义局部变量,那么其对应的对象为组件的实例:

1 @View({
2     directives:[EzCalc],
3     template : "<ez-calc #c=""></ez-calc>"
4 })

在上面的示例中,模板内的局部变量c指向EzCalc的实例。

例如:

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>template - local var</title>
 6     <script type="text/javascript" src="lib/system@0.16.11.js"></script>
 7     <script type="text/javascript" src="lib/angular2.dev.js"></script>
 8     <script type="text/javascript" src="lib/system.config.js"></script>
 9 </head>
10 <body>
11     <ez-app></ez-app>
12     
13     <script type="module">
14         import {Component,View,bootstrap} from "angular2/angular2";
15 
16         @Component({selector:"ez-app"})
17         @View({
18             template:`    
19                 <h1>
21                     I choose 
22                     <b #v_who>WHO?</b>
23                 </h1>
24                 <button (click)="v_who.textContent = 'Jason'">Jason</button>
25                 <button (click)="v_who.textContent = 'Mary'">Mary</button>
26                 <button (click)="v_who.textContent = 'Linda'">Linda</button>
27                 <button (click)="v_who.textContent = 'Lincoln'">Lincoln</button>
28                 <button (click)="v_who.textContent = 'Jimmy'">Jimmy</button>
29                 <button (click)="v_who.textContent = 'Albert'">Albert</button>
30                `
31         })
32         class EzApp{}
33                 
34         bootstrap(EzApp);
35 
36     </script>
37 </body>
38 </html>

 

转载于:https://www.cnblogs.com/gett/p/5039758.html

相关文章:

  • ubutun下安装jenkins
  • nginx-1.9.1平滑升级到nginx-1.9.7
  • bootstrap学习笔记九(菜单,按钮。导航基本元素)
  • anroid中ScrollView嵌套ListView
  • 【学神-RHEL7】1-19-RHEL7内核编译
  • hive建表没使用LZO存储格式,可是数据是LZO格式时遇到的问题
  • 找不到或无法加载已注册的 .Net Framework Data Provider。
  • react Error: query failed: synchronization failed
  • web页面如何播放amr的音频文件
  • liunx运维常见命令
  • mysql的排障之二
  • [转]关于jquery中html()、text()、val()的区别
  • netfilter/iptables 结构要点
  • nginx初级安装配置
  • -------------------- 第二讲-------- 第一节------在此给出链表的基本操作
  • [笔记] php常见简单功能及函数
  • Javascripit类型转换比较那点事儿,双等号(==)
  • MobX
  • October CMS - 快速入门 9 Images And Galleries
  • session共享问题解决方案
  • 读懂package.json -- 依赖管理
  • 给第三方使用接口的 URL 签名实现
  • 构建二叉树进行数值数组的去重及优化
  • 猴子数据域名防封接口降低小说被封的风险
  • 聊聊springcloud的EurekaClientAutoConfiguration
  • 前端每日实战:61# 视频演示如何用纯 CSS 创作一只咖啡壶
  • 学习笔记:对象,原型和继承(1)
  • 一文看透浏览器架构
  • ​什么是bug?bug的源头在哪里?
  • ​业务双活的数据切换思路设计(下)
  • #我与Java虚拟机的故事#连载12:一本书带我深入Java领域
  • #我与Java虚拟机的故事#连载15:完整阅读的第一本技术书籍
  • (2020)Java后端开发----(面试题和笔试题)
  • (附源码)php投票系统 毕业设计 121500
  • (七)Knockout 创建自定义绑定
  • (三)mysql_MYSQL(三)
  • (十八)devops持续集成开发——使用docker安装部署jenkins流水线服务
  • (实战篇)如何缓存数据
  • (四)docker:为mysql和java jar运行环境创建同一网络,容器互联
  • (一)Mocha源码阅读: 项目结构及命令行启动
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • ******IT公司面试题汇总+优秀技术博客汇总
  • .Net 垃圾回收机制原理(二)
  • .NET/C# 解压 Zip 文件时出现异常:System.IO.InvalidDataException: 找不到中央目录结尾记录。
  • .NET/C# 异常处理:写一个空的 try 块代码,而把重要代码写到 finally 中(Constrained Execution Regions)
  • /var/log/cvslog 太大
  • ?php echo ?,?php echo Hello world!;?
  • @property python知乎_Python3基础之:property
  • @Repository 注解
  • [ vulhub漏洞复现篇 ] ECShop 2.x / 3.x SQL注入/远程执行代码漏洞 xianzhi-2017-02-82239600
  • [1]-基于图搜索的路径规划基础
  • [8-27]正则表达式、扩展表达式以及相关实战
  • [ActionScript][AS3]小小笔记
  • [Angular] 笔记 6:ngStyle
  • [CareerCup] 12.3 Test Move Method in a Chess Game 测试象棋游戏中的移动方法