angular2学习 之 组件

1. 生命周期

Constructor:构造器初始化

OnChanges:触发数据变化钩子

OnInit:组件初始化(处理业务逻辑)

OnChanges:运行期间触发数据变化钩子(n多次触发)

OnDestroy:组件销毁前(数据清理,如事件解绑)

2. 模板

import { Component } from '@angular/core';
//装饰器 赋予一个类丰富的信息(元数据)
@Component({
  //元数据
  selector: 'app-root',//css3选择器 //template:'<p>内联模板</p>',
  templateUrl: './app.component.html',//外联模板
  styleUrls: ['./app.component.css']
})
//组件类
export class AppComponent {
  title = '123';
}

3.数据绑定

插值:{{}}

属性绑定:[]

事件绑定:()响应由绑定目标（如HTML元素、组件或指令）触发的事件

双向绑定:[()]

父组件向子组件传递数据

父组件中子组件标签引入数据

<contact [data]="item" ></contact>

子组件组件类中引入

export class Contact{
	@Input() data:IContact;
}

angular在数据流动上,没有提供原生的双向绑定,angular推崇单向数据绑定