angular 学习记录（三）

数据绑定：

一、属性绑定

当要把视图元素的属性 (property) 设置为模板表达式时，就要写模板的属性 (property) 绑定。
数据流动方向是从等号右边向等号左边移动。
案例：
1.image 元素的 src 属性会被绑定到组件的 imgSrc属性上

image.png
2.当组件说他isUnchanged(未改变)时禁用按钮
image.png

二、事件绑定

常常需要监听某些事件，如按键，鼠标移动，点击和触摸屏幕，事件绑定语法由等号左侧带圆括号的目标事件和右侧引号中的模板语句组成
数据流动方向是从等号左边向等号右边移动。

image.png

1.1.$event

下面的代码在把输入框的 value 属性绑定到 name 属性。 要监听对值的修改，代码绑定到输入框的 input 事件。 当用户造成更改时，input 事件被触发，并在包含了 DOM 事件对象 (event.target.value 来获取更改后的值。

<input [value]="currentHero.name"
       (input)="currentHero.name=$event.target.value" >

1.2自定义事件

一、效果：子组件按钮控制父组件按钮

image.png

二、准备：

1.创建子组件，父组件引用子组件

image.png

2.子组件添加到根模块

image.png

三、子传父的详细步骤：

首先子组件中引入 EventEmitter（事件触发器） ,Output（向外触发）
@Output装饰器定义这是一个输出变量，在这里就是从子组件输出到父组件

第一步：

在父组件中定义一个自定义事件myClick

image.png

第二步：

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