Angular 2 中的数据绑定

最新推荐文章于 2024-08-14 11:52:37 发布

一路斜阳

最新推荐文章于 2024-08-14 11:52:37 发布

阅读量3.4k

点赞数

分类专栏： Angular2

本文链接：https://blog.csdn.net/zhaoruda/article/details/57402846

版权

本文介绍了Angular 2中的数据绑定方法，包括使用{{}}显示组件数据、使用[]设置DOM属性、事件绑定以及双向绑定。详细讲解了@Input和@Output在组件间通信的作用，并通过例子说明了如何实现这些绑定技术。

摘要由CSDN通过智能技术生成

通常来说，数据绑定要么是从页面流向组件中的数据，要么是从组件中的数据流向页面。下面我们来介绍在Angular 2中数据绑定的几种不同方式。
1. 使用{ {}}将组件中的数据显示在html页面上
　　实现方式：<div>{ {value}}</div>
　　这样就可将组件中的value值显示在div元素上。
2. 使用[]DOM元素的属性值设置为组件中的数据
　　实现方式：<img [src]="srcUrl">
　　这样就可以将img标签的src属性设置为组件中的srcUrl值。但是使用[]只能绑定在DOM元素已有的属性上，例如<div [src]="srcUrl"></div>是会报错的，以为div不存在src属性。
　　但是，可以通过自定义的方式使用@Input为我们的指令添加属性，这也是实现从父子组件数据通信的一种方式，顾名思义就是@Input定义的属性值是从父组件中获取的。
　　下面我们来介绍使用@Input实现数据绑定。　

//父组件
@Component({
    selector: 'my-app',
    template: `
<customer-counter [counter] = "someValue"></customer-counter>
`,
    directives:[CustomerCounterComponent]
})

export class AppComponent{