[英]Angular call child component method from parent component
我有一个父组件,其中包含三个子组件实例。
child-product-detail.component.html
<form id="frmProduct" #frmProduct="ngForm" (ngSubmit)="onSave(frmProduct)">
<ng-content select="[buttons-view]"></ng-content>
<input type="text" id="txtProductName" name="txtProductName" [(ngModel)]="product.productName" />
</form>
child-product-detail.component.ts
onSave(form) {
let isValid = this.validate(form);
if (!isValid) return;
}
父产品.compoment.html
<child-product-detail [product]="products[0]">
<div buttons-view>
<button type="button" class="btn" (click)="saveProduct(0)" >Save</button>
</div>
</child-product-detail>
<child-product-detail [product]="products[1]">
<div buttons-view>
<button type="button" class="btn" (click)="saveProduct(1)" >Save</button>
</div>
</child-product-detail>
<child-product-detail [product]="products[2]">
<div buttons-view>
<button type="button" class="btn" (click)="saveProduct(2)" >Save</button>
</div>
</child-product-detail>
父产品.component.ts
saveProduct(productId) {
let productToSave = this.products(productIndex);
// Code required to call onSave method of child component
}
无论如何我可以调用传递它的表单对象的子组件的onSave方法吗?
谢谢。
您可以使用ViewChildren
装饰器。
@ViewChildren(ChildProductDetailComponent)
childComponents: QueryList<ChildProductDetailComponent>;
saveProduct(productId) {
this.childComponents.get(productIndex).onSave();
}
您可以使用事件发射器。
假设您的子组件具有这样的输出事件函数:
<app-product-stock (outputStockEvent)="outputStockEvent($event)"></app-product-stock>
那么这将是父级中的函数:
public outputStockEvent(event){
this.stock = event
}
在子组件中:
constructor(private fb: FormBuilder) {
this.stockForm = this.fb.group({
a: '',
b: '',
c:'',
});
}
.....
ngOnInit(): void {
this.stockForm.valueChanges.subscribe(data =>{
this.outputStockEvent.emit(data)
})
}
如果随后在 ParentComponent 中使用“保存”按钮,则可以将值写入最终数组:
public save(){
let finalObj ={ "stock":this.stock"}
}
是的,您可以使用@Output
指令来发出自定义事件。
例如:
child-product-detail.component.ts
import { Component, EventEmitter, Output } from '@angular/core';
export class ChildProductDetailComponent {
@Output() yourEventEmitter = new EventEmitter<any>();
onSave(form) {
let isValid = this.validate(form);
if (isValid) {
this.yourEventEmitter.emit(form)
};
}
当 onSave() 被执行时,它会发出yourEventEmitter
父产品.compoment.html
<child-product-detail (yourEventEmitter)="saveProduct($event)">
<button type="button" class="btn" (click)="onSave(0)" >Save</button>
</child-product-detail>
比父组件获取事件并运行函数saveProduct()并通过$event 接收表单。
父产品.component.ts
saveProduct(productId) {
// the productId is the form from the child component
}
你可以了解更多关于它https://angular.io/api/core/EventEmitter
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.