您的位置：首页 > Web前端 > AngularJS

Angular2组件开发—模板语法（六）

2015-12-11 17:43 716 查看

#var - 局部变量

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

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

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

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

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

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

例如：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>template - local var</title>
<script type="text/javascript" src="lib/system@0.16.11.js"></script>
<script type="text/javascript" src="lib/angular2.dev.js"></script>
<script type="text/javascript" src="lib/system.config.js"></script>
</head>
<body>
<ez-app></ez-app>

<script type="module">
import {Component,View,bootstrap} from "angular2/angular2";

@Component({selector:"ez-app"})
@View({
template:`
<h1>
I choose
<b #v_who>WHO?</b>
</h1>
<button (click)="v_who.textContent = 'Jason'">Jason</button>
<button (click)="v_who.textContent = 'Mary'">Mary</button>
<button (click)="v_who.textContent = 'Linda'">Linda</button>
<button (click)="v_who.textContent = 'Lincoln'">Lincoln</button>
<button (click)="v_who.textContent = 'Jimmy'">Jimmy</button>
<button (click)="v_who.textContent = 'Albert'">Albert</button>
`
})
class EzApp{}

bootstrap(EzApp);

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航