Hellou,有人可以向我解释如何使这项工作正常,因为我在使用viewChild指令方面不是很有经验......
这是交易,我正在研究一个角度小的crud应用程序,并且有一个填充表格,我的数据,每行我有一个删除按钮,打开一个小确认窗口,我已设法获得模态(ngx-bootstrap 3)打开点击,现在我必须弄清楚如何从我的父组件调用函数,我的http请求使用我的表上的按钮,但不是当我尝试修改它以打开模态和make单击确认按钮的删除请求...
这是一些代码,在我的父app.component.html小表...
<table style="width:100%" class="table table-striped"
id="billing_history_table">
<thead class="head">
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of employeelist>
<td>{{e.firstName}}</td>
<td><a (click)="childModal.show()"><span class="glyphicon
glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
<app-modal-component #childModal>
</app-modal-component>
在我的app.component.ts中,这是我的父组件
@ViewChild('childModal') childModal: ModalComponent;
这是我想在我的打开模态中调用的函数,来自父comp。
DeleteEmployee(id: string) {
this._usermanagementservice.deleteEmployee(id).subscribe(res => {
this.LoadAllEmployees();
})
}
Id来自我的DB,未在表格中显示,我不知道如何将其传递给模态
在子组件中我有
@ViewChild('childModal') public childModal: ModalDirective;
show() {
this.childModal.show();
}
hide() {
this.childModal.hide();
}
在子组件.html中
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<p>Do you want to confirm?</p>
<button type="button" class="btn btn-default"
(click)="confirm()">Yes</button>
<button type="button" class="btn btn-primary"
(click)="hide()">No</button>
</div>
</div>
</div>
</div>
希望您理解我的问题,确认子项.html中的按钮应该触发DeleteEmployee函数并使用我的表中的Id make delete request ... 我知道它必须对输出和事件表演者做点什么,但我不知道,谢谢:(
答案 0 :(得分:0)
您可以在Angular中使用EventEmitter和Input()来执行此任务。
在您的子组件中声明两个事件发射器,一个用于是单击,一个用于无单击。您可以使用输入将Id传递给子组件。
@Input() selectedItem:number;
@Output() yesClicked: EventEmitter<any> = new EventEmitter();
@Output() noClicked: EventEmitter<any> = new EventEmitter();
单击“是”时,可以在子组件中调用方法。在该方法中,您必须发出已创建的事件。
confirm(){
this.yesClicked.emit();
}
hide(){
this.noClicked.emit();
}
在子组件html中,您必须调用&#34;确认&#34; childComponent中的方法为yes click事件,隐藏方法为&#34; No&#34;点击事件。
<div bsModal #childModal="bs-modal" class="modal fade" tabindex="-1"
role="dialog" [config]="{backdrop: 'static'}" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-body text-center">
<p>Do you want to confirm?</p>
<button type="button" class="btn btn-default"
(click)="confirm()">Yes</button>
<button type="button" class="btn btn-primary"
(click)="hide()">No</button>
</div>
</div>
</div>
</div>
在父app.component.html中调用app.component.ts方法,从模板到子组件发出的事件,如下所示。
<table style="width:100%" class="table table-striped"
id="billing_history_table">
<thead class="head">
<tr>
<th>Name</th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let e of employeelist>
<td>{{e.firstName}}</td>
<td><a (click)="clickedItem=e.Id;childModal.show()"><span class="glyphicon
glyphicon-trash"></span></a></td>
</tr>
</tbody>
</table>
<app-modal-component #childModal [selectedItem]="clickedItem"(yesClicked)="DeleteEmployee($event)" (noClicked)="hide()" >
</app-modal-component>
在app组件中,为clickedItem Id声明一个变量 并声明删除和隐藏模型的方法。
clickedItem:number;
DeleteEmployee(id: string) {
this._usermanagementservice.deleteEmployee(id).subscribe(res => {
this.LoadAllEmployees();
})
}