Angular快速入门 组件及组件树(二)

模板

Template属性就是定义组件的模板,这个例子就是定义类的模板,如果需要一个外部模板,可以使用templateUrl属性。但是一个组件只能选择一种方式来指定模板。在这个例子中,用{{greeting}}实现数据绑定,这种绑定方式称为插值。数据绑定可以直接使用组件类中的成员变量。


数据绑定

除了插值还有一些数据绑定方式:

属性绑定:把组件类的数据传递到组件模板中,如value的值就会显示在input元素上。

事件绑定:与属性绑定相反,把模板中的数据通过函数调用的方式传递到组件类,当keyup事件触发的时候,会调用组件类的实例方法handle,同时把event对象作为函数的参数传递过去。

属性绑定和事件绑定都属于单项绑定

双向绑定:实现数据的双向流动,myData与input元素,二者的数据几乎实时的互相传递,ngModel是辅助数据实时传递的指令。


组件渲染

前面讲了很多组件运转机制,到这里我们可以把组件渲染出来了。元数据selector属性定义了一个hello,这是一个css3选择器,当程序运行时,它能匹配到html文件中hello标签,当组件逻辑执行完之后,输出到视图,内容就会填充到hello标签里。最终P标签会嵌入到hello标签里,模板中的变量也会替换成具体的值。这就是组件渲染的大致原理。所有的anglar2都以类似的方式渲染出来。构成我们看到的完整界面。


组件树示例

多个组件是如何关联到组件树中的?这里看一个例子。

Contact作为元素使用在contact-list模板中时,contact组件就是contact-list的子组件,就形成了父子组件的关系。需要说明的是,父组件要能使用子组件定义的一些元素标签,还需要一个导入的过程。这个导入的过程需要模块来实现。

子组件还定义了一个data变量,用@Input来装饰,这就是子组件的输入接口,用来接收来自父组件的数据。在父组件中标签,data作为元素属性来使用,这里用的前面提到的属性绑定形式。显然,属性绑定既负责组件类与模板之间数据传递,同时也担任着组件之间数据通讯的重任。


数据流动

纵观整个组件树,数据是通过属性绑定一层一层的向下传递,属性绑定是自上而下的传递。相反,自下而上的传递则通过事件绑定实现。事件绑定也负责组件间的数据传递,只是传递方向刚好相反。子组件向父组件传递数据必须定义一个输出接口@Output。需要特别说明的是,在数据流动属性上,Angular2并没有实现原生的双向绑定。前面提到的双向绑定实际上是把属性绑定和事件绑定结合在一起,间接实现了双向数据流动的效果。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容