数据绑定：

一、数据双向绑定( [(...)] )：

你经常需要显示数据属性，并在用户作出更改时更新该属性。
在元素层面上，既要设置元素属性，又要监听元素事件变化。
Angular 为此提供一种特殊的双向数据绑定语法：[(x)]。 [(x)] 语法结合了属性绑定的方括号 [x] 和事件绑定的圆括号 (x)。

第一步：

image.png

第二步：

因为双向绑定并非在angular核心包内，所以需要引入

import { FormsModule } from '@angular/forms';

image.png

效果：

image.png

手动实现双向数据绑定：

属性绑定【】+事件绑定（）

image.png

二、 @Input和@Output别名：

1.@Input 父传子

a.首先新建父子组件
b.在父组件的template中写上子组件的标签，标签内加上属性

 <app-hello-input-child [num3]="num"></app-hello-input-child>`

d.在父组件中声明要传的值num（ 相当于把num的值给到上面子组件中的[num]属性，相当于是一个prop的值）
e.子组件中，写入:

 @Input() num3: any;

image.png

传值成功：

image.png

2.Output 子传父

父组件中：

a.在父组件中定义一个自定义事件myChange

image.png

子组件中：

a.引入EventEmitter事件触发器
b.在子组件内部拿到myChange事件，通过Output进行接收，将事件初始化为一个对象，再通过emit主动触发这个自定义事件。

image.png

效果图：

image.png