Angular自定义组件属性双向绑定

本文是我的Angular学习总结, 如果是希望完整地学习双向绑定等内容, 建议翻阅下面这些资料:

在父子指令及组件之间共享数据: https://angular.cn/guide/inputs-outputs

双向绑定: https://angular.cn/guide/two-way-binding

正文

为了让自己创建的组件拥有将数据从View→Model→View的能力, 需要做到下面这几点:

在组件中添加@Input注解

在子组件使用@Input注解一个属性, 然后就可以在父组件中使用中括号[]来绑定这个属性, 使数据从父组件流向子组件.

在组件中添加@Output注解

接下来就要解决让数据从子组件流向父组件的问题.

1. 使用@Output注解一个属性

2. 该属性命名严格按照inputChange格式.

3. 被Output注解的属性一定要为EventEmitter<>类型, 其中泛型的类型可以根据被Input注解的属性的类型而决定(一般都是string啦)

4. 在你想要将组件中某个属性的数据传递给父组件时, 使用该属性对应的EventEmitter触发inputChange事件, 并在事件被触发时中添加上你想要传递给父组件的数据. 只要父组件双向绑定了子组件的属性, 那么就可以得到来自子组件的数据了

5. ps: 双向绑定 等价于 事件绑定+单向绑定. 对于子组件→父组件的数据而言, 完全可以在父组件中使用事件的方式实现.

   <child-component (inputChange)="parent_attr = $event"> </child-component>