angular组件使用

　　1.定义子组件

@Component({

  selector:"app-product-detail",

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

  styleUrls:"",

})

export class ProductDetail{

}

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

父组件使用

<app-product-detail ></app-product-detail>

　　2.父组件向子组件传值

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

export class ProductDetail{

　　@Input product;

}

（2）父组件使用

<app-product-detail [product]="product"></app-product-detail>

　　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>

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

转载于:https://www.cnblogs.com/hzozj/p/10996744.html