angular组件使用

　　1.定义子组件

@Component({

  selector:"app-product-detail",

  templeteUrl:"./product-detail/product-detail.html",

  styleUrls:"",

})

export class ProductDetail{

}

添加装饰器说明是一个组件，selector指明了该组件使用的标签名，templeteUrl指定组件模板即html，styleUrls指定样式模板。

　　父组件使用该子组件

//父组件html
<app-product-detail ></app-product-detail>

　　2.父组件向子组件传值

（1）子组件添加@Input，表示向子组件输入

export class ProductDetail{

　　@Input product;　　　　//定义input的属性

}

（2）父组件使用

<app-product-detail [product]="product"></app-product-detail>　　//product是父组件定义的属性

　　3.子组件向父组件推送事件

　(1)子组件添加outPut，表示子组件向外推送事件

export class ProductDetail{

　　@Input product;

　　@OutPut notify = new EventEmitter();

}

　(2) product-detail.html内触发事件 

<button (click)="notify.emit()" >Notify Me</button>　　//子组件触发事件

　

(3) 父组件接收事件

 <app-product-detail [product]="product" (notify)="事件方法"></app-product-detail>　　//子组件向外推事件，父组件设置方法接受

　　

  可以通过事件触发向父组件传递值。