Angular2組件開發—模板語法（六）

時間 2019-11-19

標籤 angular2 angular 組件開發模板語法欄目 AngularJS 简体版

原文原文鏈接

#var - 局部變量

有時模板中的不一樣元素間可能須要互相調用，Angular2提供一種簡單的語法將元素映射爲局部變量：添加一個以#或var-開始的屬性，後續的部分表示變量名，這個變量對應元素的實例。javascript

在下面的代碼示例中，咱們爲元素h1定義了一個局部變量v_h1，這個變量指向該元素對應的DOM對象，你能夠在模板中的其餘地方調用其方法和屬性：html

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

若是在一個組件元素上定義局部變量，那麼其對應的對象爲組件的實例：java

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

在上面的示例中，模板內的局部變量c指向EzCalc的實例。bootstrap

例如：angular2

 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>