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>
可以通过事件触发向父组件传递值。