Angular2组件开发—属性与事件（一）

属性声明 - 暴露成员变量

属性是组件暴露给外部世界的调用接口，调用者通过设置不同的属性值来定制组件的行为与外观：

在Angular2中为组件增加属性接口非常简单，只需要在Component注解的properties属性中声明组件的成员变量就可以了：

1 //EzCard 
2 @Component({
3     properties:["name","country"]
4 })

上面的代码将组件的成员变量name和country暴露为同名属性，这意味着在EzApp的模板中，可以直接使用中括号语法来设置EzCard对象的属性：

1 //EzApp
2 @View({
3     directives : [EzCard],
4     template : "<ez-card [name]="'雷锋'" [country]="'中国'"></ez-card>"
5 })

提醒：如果要在模板中使用自定义的指令（组件是一种指令），必须在View注解的directives 属性中提前声明！

例子如下：

 1 <!doctype html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>Property</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         //根组件 - EzApp
17         @Component({selector:"ez-app",
18                     properties:["name","country"]})
19         @View({
20               directives:[EzCard],
21             template:`
22                 <div class="ez-app">
23                     <h1>EzApp <b>{{name}}</b> <b>{{country}}</b> </h1>
24                     <ez-card></ez-card>
25                 </div>`
26         })
27         class EzApp{
28         constructor(){
29                 this.name = "Mike";
30                 this.country = "Sweden";
31             }
32         }       
33         
34         //具有属性接口的组件 - EzCard
35         @Component({
36             selector:"ez-card",
37             properties:["name","country"]
38         })
39         @View({
40             template : `<div class='ez-card'>
41                     My name is <b>{{name}}</b>, 
42                     I am from <b>{{country}}</b>.</div>`
43         })
44         class EzCard{
45             constructor(){
46                 this.name = "Mike";
47                 this.country = "Sweden";
48             }
49         }
50                 
51         //渲染组件
52         bootstrap(EzApp);
53     </script>
54 </body>
55 </html>

结果如下：